@import url("normalize.css") layer(normalize);
@import url("base.css") layer(base);

/* Biến CSS */
:root {
    --bg-dark: #171717;
    --bg-light: #FAFAFA;
    --bg-main: #212121;
    --bg-input: #2d2d2d;
    --bg-text: rgb(236 225 255 / var(--tw-bg-opacity, 1));
    --bg-text-bot: rgb(236 225 255 / var(--tw-bg-opacity, 1));
    --bg-text-user: rgb(255 241 234 / var(--tw-bg-opacity, 1));
    --bg-after: rgb(189, 185, 185, 0.4);
    --text-light: #7b47e5;
    --text-gray: #8e8ea0;
    --text-black: #242429;
    --text-user: rgb(255 74 13 / var(--tw-text-opacity, 1));
    --border-color: rgb(220 208 255 / var(--tw-bg-opacity, 1));
    --hover-color: rgb(220 208 255 / var(--tw-bg-opacity, 1));
    --button-color: #40414f;
    --button-hover: rgb(213 196 255 / var(--tw-bg-opacity, 1));
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 0px;
    --transition-speed: 0.45s;
    --width-main-content: 790px;
    --box-shadow-light: 0px 0px 10px 1px rgba(199, 12, 127, 0.15);

    /* Text colors */
    --note-text-color-1: #000000; /* black */
    --note-text-color-2: #ff3b30; /* red */
    --note-text-color-3: #ff9500; /* orange */
    --note-text-color-4: #ffcc00; /* yellow */
    --note-text-color-5: #4cd964; /* green */
    --note-text-color-6: #5ac8fa; /* light-blue */
    --note-text-color-7: #007aff; /* dark-blue */
    --note-text-color-8: #5856d6; /* violet */

    /* Highlight colors */
    --note-highlight-color-1: #fcecec; /* red */
    --note-highlight-color-2: #ffeceb; /* orange */
    --note-highlight-color-3: #fff8e1; /* yellow */
    --note-highlight-color-4: #f1fae5; /* green */
    --note-highlight-color-5: #e6f9f0; /* light-blue */
    --note-highlight-color-6: #e8f0fe; /* violet */
    --note-highlight-color-7: #e7f0ff; /* dark-blue */
    --note-highlight-color-8: #f3e8ff; /* violet */
}

* {
    box-sizing: border-box;
}

a {
    cursor: pointer;
}

svg {
    cursor: pointer;
}

@layer layout {
    body {
        padding-inline: 32px;
    }

    main {
        max-width: var(--width);
        display: block;
        margin-inline: auto;

        &[data-height="main"] {
            height: calc(100vh - 250px);
        }
    }

    @media screen and (min-width: 768px) {

        header,
        main {
            --width: 768px;
        }
    }

    @media screen and (min-width: 1024px) {

        header,
        main {
            --width: 1024px;
        }
    }
}

@layer components {
    input {
        display: block;
        width: 100%;
        height: 48px;
        font-size: 0.875rem;
        padding-inline: 16px;
        border-radius: var(--border-radius-1);
        border: 1px solid var(--color-tertiary);

        ::placeholder,
        ::-webkit-input-placeholder,
        :-ms-input-placeholder,
        :-moz-placeholder {
            color: var(--color-tertiary);
        }
    }

    textarea {
        display: block;
        width: 100%;
        font-size: 0.875rem;
        padding: 16px 24px;
        border-radius: var(--border-radius-1);
        border: 1px solid var(--color-tertiary);
        overflow: auto;
        scrollbar-width: none;
        resize: none;
        max-height: 100px;

        ::placeholder,
        ::-webkit-input-placeholder,
        :-ms-input-placeholder,
        :-moz-placeholder {
            color: var(--color-tertiary);
        }
    }
}

@layer utilities {
    .sr-only:not(:focus):not(:active) {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
}