/* Overriding CSS variables in Shoelace */
:root,
:host {
    --sl-color-primary-50: rgb(247 250 253);
    --sl-color-primary-100: rgb(227 238 247);
    --sl-color-primary-200: rgb(206 224 241);
    --sl-color-primary-300: rgb(183 210 235);
    --sl-color-primary-400: rgb(152 190 226);
    --sl-color-primary-500: rgb(111 164 215);
    --sl-color-primary-600: rgb(66 136 202);
    --sl-color-primary-700: rgb(26 110 189);
    --sl-color-primary-800: rgb(21 91 156);
    --sl-color-primary-900: rgb(15 65 111);
    --sl-color-primary-950: rgb(9 40 69);
    --sl-focus-ring-color: var(--theme-outline-color);
}

html {
    --header-font: Segoe UI Variable Display, 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    --body-font: Segoe UI Variable Text, 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

    /* Unify the colors of third-party component and custom components when in focus */
    --selection: transparent;
    --selection-border: var(--theme-outline-color);

    /* There may be a situation where you do not want to switch the black and white color of the system, so set the default fixed color */
    --sl-default-white: #fff;
    --sl-default-black: #333;

    /* common css variables */
    --sl-title-font-weight: 600;
    --sl-font-size-x-medium: 1.125rem;
    /* In the middle of the large and medium font sizes. (18px) */
    --theme-sale-badge-background-color: #FCE100;
    /* This color doesn't vary between light and dark modes according to Figma */
    --theme-sale-badge-color: rgba(0, 0, 0, 0.6063);
    /* Likewise, this color shouldn't vary between light and dark modes. */
    --theme-shadow-gradient-color: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.33) 40%, rgba(0, 0, 0, 0) 100%);
    --card-default-bg: #f9f9f9;

    /* Light theme variables */
    --theme-font-color: var(--sl-color-gray-950);
    --theme-background-color: #F3F3F3;
    --theme-header-background-color: #FFFFFF;
    --theme-card-background-color: rgba(255, 255, 255, 0.7);
    --theme-card-hover-background-color: var(--sl-color-neutral-0);
    --theme-noise-image-to-linear-gradient: linear-gradient(#f0f0f0, #f0f0f0);
    --theme-tall-card-blur-color: rgba(110, 110, 110, 0.5);
    --theme-collection-background-mixed-color: rgba(255, 255, 255, .66);
    --theme-divider-color: #0000000F;
    --theme-tall-tile-font-color: #646464;
    --theme-collection-title-font-color: #0f2770;
    --theme-collection-title-background-color: #e8ebeb;
    --theme-subtitle-color: #636363;
    --theme-star-color: #8b8b8b;
    --theme-border-color: var(--sl-color-neutral-200);
    --theme-icon-border-color: rgba(0, 0, 0, 0.06);
    --theme-outline-color: rgba(0, 0, 0, 0.9);
    --theme-primary-element-color: #005FB8;
    --theme-category-color: var(--sl-color-neutral-200);
    --theme-tooltip-link-color: #86E8FF;

    /* Default animation-timing-function */
    --ease-out: cubic-bezier(0.33, 1, 0.68, 1);

    /* Dark theme variables */
    @media (prefers-color-scheme: dark) {
        &:not(.force-light-mode) {
            --theme-font-color: var(--sl-default-white);
            --theme-background-color: #101010;
            --theme-header-background-color: #000000;
            --theme-card-background-color: rgba(255, 255, 255, 0.0512);
            --theme-card-hover-background-color: var(--sl-color-neutral-100);
            --theme-noise-image-to-linear-gradient: linear-gradient(#454545, #454545);
            --theme-tall-card-blur-color: rgba(0, 0, 0, 0.3);
            --theme-collection-background-mixed-color: rgba(0, 0, 0, .66);
            --theme-divider-color: rgba(255, 255, 255, 0.0837);
            --theme-sale-badge-background-color: #FCE100;
            --theme-primary-element-color: #005FB8;
            --theme-secondary-element-color: #60CDFF;
            --theme-secondary-element-hover-color: #86E8FF;
            --theme-tall-tile-font-color: #D1D1D1;
            --theme-collection-title-font-color: #99ebff;
            --theme-collection-title-background-color: #353333;
            --theme-subtitle-color: #D1D1D1;
            --theme-star-color: #8b8b8b;
            --theme-border-color: var(--sl-color-neutral-0);
            --theme-icon-border-color: rgba(255, 255, 255, 0.07);
            --theme-outline-color: #ffffff;
            --theme-category-color: #FFFFFFC8;
            --theme-tooltip-link-color: var(--theme-primary-element-color);
        }
    }

    /* Maximum width of an extra small screen, synchronized with BreakpointMax.xs*/
    @media (max-width: 575px) {
        font-size: 14px;
    }
}

html[dir="rtl"] {
    /** In RTL mode, we can't use Segoe UI Variable Display or Segoe UI Variable Text, as these don't support Arabic open type settings.
      * See https://microsoft.visualstudio.com/OS/_workitems/edit/59402477
      */
    --header-font: 'Segoe UI Variable', "Segoe UI", SegoeUI, "Traditional Arabic", 'Arial', system-ui, -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', 'Noto Sans', sans-serif;
    --body-font: 'Segoe UI Variable', "Segoe UI", SegoeUI, "Traditional Arabic", 'Arial', system-ui, -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', 'Noto Sans', sans-serif;
    font-feature-settings: normal; /* Disable 'fina' (final form substitution). Without this, Arabic text doesn't properly render properly even for fonts that otherwise support Arabic. See https://portal.microsofticm.com/imp/v5/incidents/details/690155151/summary */
}

html,
body {
    font-family: var(--body-font);
    font-feature-settings: 'init' on;
    color: var(--theme-font-color);
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
    background-color: var(--theme-header-background-color);
}

/* Styles defined here for page transition animations. They must be defined here; scoped component CSS doesn't apply, as the page transitions use an overlay at the root of the <body> element. */
@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

@keyframes slide-from-right {
    from {
        transform: translateX(60px);
    }
}

@keyframes slide-to-left {
    to {
        transform: translateX(-60px);
    }
}

@keyframes slide-to-right {
    to {
        transform: translateX(60px);
    }
}

@keyframes slide-from-left {
    from {
        transform: translateX(-60px);
    }
}

/* For browsers that support it, use view transition animations for pages */
/* View transition animation for the old page going out */
::view-transition-old(root) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
        400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

/* View transition animation for the new page coming in */
::view-transition-new(root) {
    animation: 310ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
        400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Overrides for 'back' view page transitions */
/* View transition animation the old page going out on back navigation */
.back-transition::view-transition-old(root) {
    animation-name: fade-out, slide-to-right;
}

/* View transition animation the new page coming in on back navigation */
.back-transition::view-transition-new(root) {
    animation-name: fade-in, slide-from-left;
}

/* Exclude the header and footer from view transition by giving each its own view transition name. This way the header and footer won't transition in and out with the page content. */
::part(app-header) {
    view-transition-name: app-header-transition;
}

::part(app-footer) {
    view-transition-name: app-footer-transition;
}

/* View transition animation for app logo and app title: when a product is clicked, we set that product's image as app-logo. Then, on product details page (PDP), we set the product image as app-logo. This allows a view transition from small logo on e.g. home page, to slide up and zoom into logo on PDP. */
::view-transition-new(app-logo),
::view-transition-new(app-title) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-image-pair(app-logo),
::view-transition-image-pair(app-title) {
    isolation: none;
}

/* Toasts should appear below the app header */
.sl-toast-stack {
    top: 100px;
}

/* Adding cookie banner here due to shadow dom limiting access */
#cookie-banner {
    position: fixed;
    bottom: 0;
    z-index: 1000;
}

.sl-scroll-lock {
    /* When screenshots pops up a dialog, as the default value of this variable is 15px,
    there is space between the scrollbar and the edge, which causes the nav header to also have space between it and the edge.*/
    --sl-scroll-lock-size: 0 !important;
}