@import "tailwindcss";

@import "./animations.css";
@import "./other.utils.css";
@import "./typo.utils.css";
@import "./button.comp.css";
@import "./input.comp.css";
@import "./fonts/iran-yekan-x.css";

:root {
    /* CONTAINER */
    --app-container-padding: 1rem;
}

@theme {
    /* COLORS */
    --color-slate-50: hsl(210, 40%, 98%);
    --color-slate-100: hsl(210, 40%, 96%);
    --color-slate-200: hsl(214, 32%, 91%);
    --color-slate-300: hsl(213, 27%, 84%);
    --color-slate-400: hsl(215, 20%, 65%);
    --color-slate-500: hsl(215, 16%, 47%);
    --color-slate-600: hsl(215, 19%, 35%);
    --color-slate-700: hsl(215, 25%, 27%);
    --color-slate-800: hsl(217, 33%, 17%);
    --color-slate-900: hsl(222, 47%, 11%);
    --color-slate-950: hsl(229, 84%, 5%);

    --color-blue-50: hsl(214, 100%, 97%);
    --color-blue-100: hsl(214, 95%, 93%);
    --color-blue-200: hsl(213, 97%, 87%);
    --color-blue-300: hsl(212, 96%, 78%);
    --color-blue-400: hsl(213, 94%, 68%);
    --color-blue-500: hsl(217, 91%, 60%);
    --color-blue-600: hsl(221, 83%, 53%);
    --color-blue-700: hsl(224, 76%, 48%);
    --color-blue-800: hsl(226, 71%, 40%);
    --color-blue-900: hsl(224, 64%, 33%);
    --color-blue-950: hsl(226, 57%, 21%);

    --color-cyan-50: hsl(183, 100%, 96%);
    --color-cyan-100: hsl(185, 96%, 90%);
    --color-cyan-200: hsl(185, 96%, 90%);
    --color-cyan-300: hsl(187, 92%, 69%);
    --color-cyan-400: hsl(188, 86%, 53%);
    --color-cyan-500: hsl(189, 94%, 43%);
    --color-cyan-600: hsl(192, 91%, 36%);
    --color-cyan-700: hsl(193, 82%, 31%);
    --color-cyan-800: hsl(194, 70%, 27%);
    --color-cyan-900: hsl(196, 64%, 24%);
    --color-cyan-950: hsl(197, 79%, 15%);

    --color-orange-50: hsl(33, 100%, 96%);
    --color-orange-100: hsl(34, 100%, 92%);
    --color-orange-200: hsl(32, 98%, 83%);
    --color-orange-300: hsl(31, 97%, 72%);
    --color-orange-400: hsl(27, 96%, 61%);
    --color-orange-500: hsl(25, 95%, 53%);
    --color-orange-600: hsl(21, 90%, 48%);
    --color-orange-700: hsl(17, 88%, 40%);
    --color-orange-800: hsl(15, 79%, 34%);
    --color-orange-900: hsl(15, 75%, 28%);
    --color-orange-950: hsl(13, 81%, 15%);

    --color-success-50: hsl(138, 76%, 97%);
    --color-success-100: hsl(141, 84%, 93%);
    --color-success-200: hsl(141, 79%, 85%);
    --color-success-300: hsl(142, 77%, 73%);
    --color-success-400: hsl(142, 69%, 58%);
    --color-success-500: hsl(142, 71%, 45%);
    --color-success-600: hsl(142, 76%, 36%);
    --color-success-700: hsl(142, 72%, 29%);
    --color-success-800: hsl(143, 64%, 24%);
    --color-success-900: hsl(144, 61%, 20%);
    --color-success-950: hsl(145, 80%, 10%);

    --color-warning-50: hsl(55, 92%, 95%);
    --color-warning-100: hsl(55, 97%, 88%);
    --color-warning-200: hsl(53, 98%, 77%);
    --color-warning-300: hsl(50, 98%, 64%);
    --color-warning-400: hsl(48, 96%, 53%);
    --color-warning-500: hsl(45, 93%, 47%);
    --color-warning-600: hsl(41, 96%, 40%);
    --color-warning-700: hsl(35, 92%, 33%);
    --color-warning-800: hsl(32, 81%, 29%);
    --color-warning-900: hsl(28, 73%, 26%);
    --color-warning-950: hsl(26, 83%, 14%);

    --color-danger-50: hsl(0, 86%, 97%);
    --color-danger-100: hsl(0, 93%, 94%);
    --color-danger-200: hsl(0, 96%, 89%);
    --color-danger-300: hsl(0, 94%, 82%);
    --color-danger-400: hsl(0, 91%, 71%);
    --color-danger-500: hsl(0, 84%, 60%);
    --color-danger-600: hsl(0, 72%, 51%);
    --color-danger-700: hsl(0, 74%, 42%);
    --color-danger-800: hsl(0, 70%, 35%);
    --color-danger-900: hsl(0, 63%, 31%);
    --color-danger-950: hsl(0, 75%, 15%);

    /* BORDER RADIUS */
    --radius-50: 5px;
    --radius-100: 10px;
    --radius-150: 15px;
    --radius-200: 20px;
    --radius-250: 25px;
    --radius-360: 99999999px;

    /* FONT WEIGHT */
    --font-weight-extrablack: 950;
    --font-weight-heavy: 1000;

    /* FONT FAMILY */
    --font-lato: "Lato", sans-serif;
    --font-inter: "Inter", sans-serif;
    --font-dmsans: "DM Sans", sans-serif;
    --font-iran-yekan-x: "IRANYekanXVF", "sans-serif";

    /* BREAKPOINTS */
    --breakpoint-2xs: 400px;
    --breakpoint-xs: 480px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    --breakpoint-3xl: 1700px;

    /* ANIMATIONS */
    --animate-fade-in: fadeIn 350ms ease-in-out;

    --animate-slide-down: slideDown 300ms ease-out;
    --animate-slide-up: slideUp 300ms ease-out;
    --animate-overlay-show: overlayShow 150ms ease-in;
    --animate-content-show: contentShow 150ms ease-in;

    --animate-slide-down-fade: slideDownAndFade 300ms ease-out;
    --animate-slide-left-fade: slideLeftAndFade 300ms ease-out;
    --animate-slide-up-fade: slideUpAndFade 300ms ease-out;
    --animate-slide-right-fade: slideRightAndFade 300ms ease-out;

    --animate-toast-hide: toastHide 100ms ease-in;
    --animate-toast-in: toastSlideIn 600ms cubic-bezier(0.16, 1, 0.3, 1);
    --animate-toast-out: toastSlideOut 200ms ease-out;

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes slideDown {
        from {
            height: 0;
        }
        to {
            height: var(--reka-accordion-content-height);
        }
    }

    @keyframes slideUp {
        from {
            height: var(--reka-accordion-content-height);
        }
        to {
            height: 0;
        }
    }

    @keyframes overlayShow {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes contentShow {
        from {
            opacity: 0;
            transform: scale(0.96);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes toastHide {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }

    @keyframes toastSlideIn {
        from {
            opacity: 0;
            transform: translateY(calc(100% + var(--viewport-padding)));
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes toastSlideOut {
        from {
            opacity: 1;
            transform: translateY(var(--reka-toast-swipe-end-x));
        }
        to {
            opacity: 0;
            transform: translateY(calc(100% + var(--viewport-padding)));
        }
    }

    @keyframes slideDownAndFade {
        from {
            opacity: 0;
            transform: translateY(-2px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes slideLeftAndFade {
        from {
            opacity: 0;
            transform: translateX(2px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes slideUpAndFade {
        from {
            opacity: 0;
            transform: translateY(2px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes slideRightAndFade {
        from {
            opacity: 0;
            transform: translateX(-2px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}

/* CONTAINER */

/* * {
    scroll-behavior: smooth !important;
} */

@utility container {
    @apply mx-auto px-[var(--app-container-padding)] w-full max-sm:max-w-[var(--breakpoint-xs)] max-md:max-w-[var(--breakpoint-sm)] max-lg:max-w-[var(--breakpoint-md)] max-xl:max-w-[var(--breakpoint-lg)] max-w-[var(--breakpoint-2xl)];
}

@layer {
    button {
        @apply cursor-pointer;
    }

    .vpd-main {
        @apply !w-full !border-none !p-0;
    }

    .vpd-input-group {
        @apply !flex-row-reverse;
    }

    .vpd-input-group > input {
        @apply !border-e-0 !rounded-none !rounded-s-100 !px-4;
    }

    .vpd-input-group > label {
        @apply !rounded-e-sm lg:!rounded-e-100;
    }

    .vpd-main > .vpd-wrapper > .vpd-container {
        @apply !rounded-xl !overflow-hidden;
    }

    .vpd-main.error > .vpd-input-group > #vpd-vpd-date-picker {
        @apply border-danger-600 border-2;
    }

    .vpd-main > .vpd-input-group > .vpd-icon-btn {
        @apply !bg-black;
    }

    .vpd-main.error > .vpd-input-group > .vpd-icon-btn {
        @apply bg-danger-600 border-danger-600 border-t-2 border-r-2 border-b;
    }

    .vpd-controls button {
        @apply flex justify-center items-center;
    }

    .pattern {
        width: 100%;
        height: 100%;
        --color: #191a1a10;
        background-color: white;
        background-image: linear-gradient(
                0deg,
                transparent 24%,
                var(--color) 25%,
                var(--color) 26%,
                transparent 27%,
                transparent 74%,
                var(--color) 75%,
                var(--color) 76%,
                transparent 77%,
                transparent
            ),
            linear-gradient(
                90deg,
                transparent 24%,
                var(--color) 25%,
                var(--color) 26%,
                transparent 27%,
                transparent 74%,
                var(--color) 75%,
                var(--color) 76%,
                transparent 77%,
                transparent
            );
        background-size: 55px 55px;
    }
}