/**
 * Scanned from `src/` rather than `src/Resources/`, so classes named in `src/Config` and
 * `src/DataGrids` — the menu and datagrid icons — are seen too.
 */
@import "tailwindcss" source("../../../");

@theme {
    /**
     * Breakpoints — the widths at which the layout changes.
     *
     * Ordered largest to smallest so the `max-*` utilities read in the same direction
     * as the screens they apply to.
     */
    --breakpoint-2xl:  1440px;
    --breakpoint-xl:   1240px;
    --breakpoint-1180: 1180px;
    --breakpoint-1060: 1060px;
    --breakpoint-lg:   1024px;
    --breakpoint-991:  991px;
    --breakpoint-868:  868px;
    --breakpoint-md:   768px;
    --breakpoint-sm:   525px;

    /**
     * Colours — the palette of named colours used in the storefront.
     */
    --color-navyBlue:    #060C3B;
    --color-lightOrange: #F6F2EB;
    --color-darkGreen:   #40994A;
    --color-darkBlue:    #0044F2;
    --color-darkPink:    #F85156;

    /**
     * Fonts — the named families the storefront can ask for by utility.
     */
    --font-poppins: "Poppins", sans-serif;
    --font-dmserif: "DM Serif Display", serif;

    /**
     * The fallback font, pinned to the stack Tailwind 3 shipped.
     *
     * v4 dropped `system-ui` from the front of its default, which lands on a different
     * face on Linux and Windows. Poppins covers the storefront itself, but the
     * cookie-consent banner asks for `font-sans` by name.
     */
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

@utility container {
    margin-inline: auto;
    padding-inline: 90px;

    @variant 2xl {
        max-width: 1440px;
    }
}

/**
 * Icons.
 *
 * Each icon is a utility rather than a plain class so it can carry variants.
 *
 * Only the glyphs the storefront actually uses are declared, and the scan of `src/`
 * finds all but five of them on its own. Those five are named outside this package —
 * `icon-share` by the SocialShare view, and the four service icons by the theme content
 * the installer seeds — so nothing here mentions them and the scanner never sees them.
 * They are safelisted for that reason alone; anything else added below is picked up
 * automatically.
 */
@source inline("{icon-dollar-sign,icon-product,icon-share,icon-support,icon-truck}");
@theme {
    --icon-uncheck:                "\e941";
    --icon-check-box:              "\e90f";
    --icon-radio-unselect:         "\e931";
    --icon-radio-select:           "\e930";
    --icon-gdpr-safe:              "\e84f";
    --icon-checkout-address:       "\e944";
    --icon-edit:                   "\e943";
    --icon-arrow-down:             "\e901";
    --icon-arrow-left-stylish:     "\e902";
    --icon-arrow-left:             "\e903";
    --icon-arrow-right-stylish:    "\e904";
    --icon-arrow-right:            "\e905";
    --icon-arrow-up:               "\e906";
    --icon-bin:                    "\e908";
    --icon-calendar:               "\e90a";
    --icon-camera:                 "\e90c";
    --icon-cancel:                 "\e90d";
    --icon-cart:                   "\e90e";
    --icon-swap:                   "\e910";
    --icon-compare:                "\e911";
    --icon-dollar-sign:            "\e913";
    --icon-double-arrow:           "\e914";
    --icon-download:               "\e915";
    --icon-error:                  "\e917";
    --icon-eye:                    "\e918";
    --icon-funnel:                 "\e919";
    --icon-filter:                 "\e91b";
    --icon-flate-rate:             "\e91c";
    --icon-grid-view-fill:         "\e91e";
    --icon-grid-view:              "\e91f";
    --icon-hamburger:              "\e920";
    --icon-heart-fill:             "\e923";
    --icon-heart:                  "\e924";
    --icon-listing-fill:           "\e927";
    --icon-listing:                "\e928";
    --icon-location:               "\e929";
    --icon-minus:                  "\e92a";
    --icon-more:                   "\e92b";
    --icon-orders:                 "\e92c";
    --icon-pen:                    "\e92d";
    --icon-plus:                   "\e92e";
    --icon-product:                "\e92f";
    --icon-search:                 "\e933";
    --icon-share:                  "\e934";
    --icon-sort:                   "\e935";
    --icon-star-fill:              "\e938";
    --icon-star:                   "\e939";
    --icon-support:                "\e93a";
    --icon-toast-done:             "\e93c";
    --icon-toast-error:            "\e93d";
    --icon-toast-exclamation-mark: "\e93e";
    --icon-toast-info:             "\e93f";
    --icon-truck:                  "\e940";
    --icon-users:                  "\e942";
}

@utility icon-* {
    &::before { content: --value(--icon-*); }
}

/**
 * Base.
 *
 * Element defaults, and the handful of v3 behaviours v4 dropped that the storefront
 * still relies on — the grey border, the pointer on buttons, the grey placeholder.
 */
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }

    button:not(:disabled),
    [role="button"]:not(:disabled) {
        cursor: pointer;
    }

    * {
        @apply box-border font-poppins;
    }

    html {
        margin-top: 0 !important;
    }

    input {
        @apply outline-none;
    }

    input::placeholder,
    textarea::placeholder {
        @apply text-gray-400;
    }

    button:disabled,
    button:disabled:hover {
        @apply cursor-not-allowed opacity-50;
    }

    img.lazy {
        visibility: hidden;
    }

    ::selection {
        background-color: rgba(6, 12, 59, .2);
    }
}

@font-face {
    font-family: "bagisto-shop";
    src: url("../fonts/bagisto-shop.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/**
 * Components.
 *
 * The repeated pieces of the storefront — the icon font, the scrollbar, the shared
 * blocks — named once here so a view spells out only what is particular to it.
 */
@layer components {
    .direction-ltr {
        direction: ltr;
    }

    .direction-rtl {
        direction: rtl;
    }

    [class^="icon-"],
    [class*=" icon-"] {
        font-family: "bagisto-shop" !important;
        speak: never;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1 !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .journal-scroll::-webkit-scrollbar {
        width: 14px;
        cursor: pointer;
    }

    .journal-scroll::-webkit-scrollbar-track {
        background-color: #fff;
        cursor: pointer;
        border-radius: 12px;
        border: 1px solid #e9e9e9;
    }

    .journal-scroll::-webkit-scrollbar-thumb {
        cursor: pointer;
        background-color: #e9e9e9;
        border-radius: 12px;
        border: 3px solid transparent;
        background-clip: content-box;
    }

    .scrollbar-width-hidden {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .scrollbar-width-hidden::-webkit-scrollbar {
        display: none;
    }

    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    .custom-select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: transparent;
        background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
        background-repeat: no-repeat;
        background-position-x: calc(100% - 10px);
        background-position-y: 50%;
    }

    [dir="rtl"] .custom-select {
        background-position-x: calc(100% - (100% - 10px));
    }

    .label-pending,
    .label-processing,
    .label-closed,
    .label-canceled,
    .label-info,
    .label-completed,
    .label-active {
        @apply text-[12px] text-white font-semibold py-px px-1.5 max-w-max rounded-[35px];
    }

    .label-pending {
        @apply bg-yellow-500;
    }

    .label-processing {
        @apply bg-cyan-600;
    }

    .label-completed,
    .label-active {
        @apply bg-green-600;
    }

    .label-closed {
        @apply bg-indigo-600;
    }

    .label-canceled {
        @apply bg-rose-600;
    }

    .label-info {
        @apply bg-slate-400;
    }

    .primary-button {
        @apply flex gap-x-1.5 items-center place-content-center font-medium rounded-xl text-white bg-navyBlue border border-navyBlue px-8 py-4 max-w-max cursor-pointer transition-all hover:opacity-[0.9];
    }

    .secondary-button {
        @apply flex gap-x-1.5 items-center place-content-center font-medium rounded-xl bg-white text-navyBlue border border-navyBlue px-8 py-4 max-w-max cursor-pointer transition-all hover:bg-[#050e3a0d];
    }

    .shimmer {
        animation-duration: 2.2s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: skeleton;
        animation-timing-function: linear;
        background: linear-gradient(to right, #F6F6F6 8%, #F0F0F0 18%, #F6F6F6 33%);
        background-size: 1250px 100%;
    }

    @keyframes skeleton {
        0%   { background-position: -1250px 0; }
        100% { background-position:  1250px 0; }
    }

    @keyframes on-fade {
        0%   { opacity: 0; }
        100% { opacity: 1; }
    }

    .wrapper-404 {
        position: relative;
        font-size: 394px;
        perspective: 4.5em;
        overflow: clip;
        place-self: stretch;
        top: 50%;
        transform: translateY(-62%);
    }

    .glow-404,
    .glow-shadow-404 {
        position: absolute;
        inset: 0;
        display: grid;
        place-content: center;
        font-family: 'DM Serif Display';
        overflow: hidden;
        letter-spacing: 24px;
    }

    .glow-404 {
        background-clip: text;
        -webkit-background-clip: text;
        color: #060C3B;
    }

    .glow-shadow-404 {
        color: #E6E7EB;
        mix-blend-mode: darken;
        transform: translateY(15.5%) rotateX(243deg) scaleY(-1) translateY(-23%) scaleY(1.35) translateX(7%) skewX(-45deg);
    }

    canvas[resize] {
        width: 100%;
        height: 100vh;
    }

    .break-word-custom {
        word-break: break-word;
    }

    .required::after {
        content: "*";
    }

    .skip-to-main-content-link {
        @apply absolute ltr:left-[-9999px] rtl:right-[-9999px] z-[999] p-[1em] bg-black text-white opacity-0;
    }

    .skip-to-main-content-link:focus {
        @apply ltr:left-1/2 rtl:right-1/2 ltr:translate-x-1/2 rtl:translate-x-[-50%] opacity-100;
    }
}