@tailwind base;
@tailwind components;
@tailwind utilities;

/* Vazirmatn FONT FACES */
@font-face {
    font-family: Vazirmatn;
    src: url('../font/Vazir/Vazirmatn-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn;
    src: url('../font/Vazir/Vazirmatn-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn;
    src: url('../font/Vazir/Vazirmatn-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn;
    src: url('../font/Vazir/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn;
    src: url('../font/Vazir/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn;
    src: url('../font/Vazir/Vazirmatn-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn;
    src: url('../font/Vazir/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn;
    src: url('../font/Vazir/Vazirmatn-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn;
    src: url('../font/Vazir/Vazirmatn-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Vazirmatn-FD FONT FACES */
@font-face {
    font-family: Vazirmatn FD;
    src: url('../font/Vazir-FD/Vazirmatn-FD-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn FD;
    src: url('../font/Vazir-FD/Vazirmatn-FD-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn FD;
    src: url('../font/Vazir-FD/Vazirmatn-FD-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn FD;
    src: url('../font/Vazir-FD/Vazirmatn-FD-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn FD;
    src: url('../font/Vazir-FD/Vazirmatn-FD-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn FD;
    src: url('../font/Vazir-FD/Vazirmatn-FD-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn FD;
    src: url('../font/Vazir-FD/Vazirmatn-FD-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn FD;
    src: url('../font/Vazir-FD/Vazirmatn-FD-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn FD;
    src: url('../font/Vazir-FD/Vazirmatn-FD-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* LIGHT MODE VARIABLES*/
:root {
    --scrollbarprimary: #e5e7eb /*theme('colors.textarea-bg-light')*/;
    --scrollbarsecondary: #9ca3af /*theme('colors.textarea-scroll-light')*/;
}

/* DARK MODE VARIABLES*/
[data-mode=dark] {
    --scrollbarprimary: #475569 /*theme('colors.textarea-bg-dark')*/;
    --scrollbarsecondary: #9ca3af /*theme('colors.textarea-scroll-dark')*/;
}

/* Firefox */
textarea {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbarsecondary) var(--scrollbarprimary);
}

/* Chrome, Edge, and Safari */
textarea::-webkit-scrollbar {
    width: 10px;
}

textarea::-webkit-scrollbar-track {
    background: var(--scrollbarprimary);
    border-radius: 5px;
}

textarea::-webkit-scrollbar-thumb {
    background-color: var(--scrollbarsecondary);
    border-radius: 5px;
    border: 3px solid var(--scrollbarprimary);
}

textarea::-webkit-resizer {
    border-width: 5px;
    border-style: solid;
}

[dir=ltr] textarea::-webkit-resizer {
    border-color: var(--scrollbarprimary) var(--scrollbarsecondary) var(--scrollbarsecondary) var(--scrollbarprimary);
}

[dir=rtl] textarea::-webkit-resizer {
    border-color: var(--scrollbarprimary) var(--scrollbarprimary) var(--scrollbarsecondary) var(--scrollbarsecondary);
}