/* Main token overrides */
#ciclp-app,
#footer-wrapper,
#commerce-header-v2-wrapper,
#experience-wrapper,
/* Exclude modals with iframes (e.g. Launch Checkout modal and NotifyMe modals on PDP) */
.modal-portal-content-wrapper:not(:has(iframe)):not(:has(form[data-testid="mobile-verify-form"])):not(:has([data-testid="notifyme-remote-component"])):not(:has([data-testid="notify-me-modal-subtitle"])),
main
{
  /* Tokens for new colors */
  --podium-cds-color-phoenix: #28201f;
  --podium-cds-color-myrhh: #a89687;
  --podium-cds-color-ruby: #ff4040;

  /* Main theme overrides */
  --podium-cds-icon-button-color-bg-primary: var(--podium-cds-color-white);
  --podium-cds-icon-button-color-bg-primary-on-light: var(--podium-cds-color-black);
  --podium-cds-icon-button-color-bg-primary-on-dark: var(--podium-cds-color-white);
  --podium-cds-icon-button-color-bg-primary-hover: var(--podium-cds-color-grey-400);
  --podium-cds-icon-button-color-bg-primary-hover-on-light: var(--podium-cds-color-grey-400);
  --podium-cds-icon-button-color-bg-primary-hover-on-dark: var(--podium-cds-color-grey-700);
  --podium-cds-icon-button-color-bg-disabled: var(--podium-cds-color-grey-500);
  --podium-cds-icon-button-color-bg-disabled-on-light: var(--podium-cds-color-grey-200);
  --podium-cds-icon-button-color-bg-disabled-on-dark: var(--podium-cds-color-grey-500);
  --podium-cds-icon-button-color-bg-secondary: var(--podium-cds-color-black);
  --podium-cds-icon-button-color-bg-secondary-on-light: var(--podium-cds-color-grey-100);
  --podium-cds-icon-button-color-bg-secondary-on-dark: var(--podium-cds-color-black);
  --podium-cds-icon-button-color-bg-secondary-hover: var(--podium-cds-color-grey-700);
  --podium-cds-icon-button-color-bg-secondary-hover-on-light: var(--podium-cds-color-grey-300);
  --podium-cds-icon-button-color-bg-secondary-hover-on-dark: var(--podium-cds-color-grey-700);
  --podium-cds-icon-button-color-bg-tertiary-hover: var(--podium-cds-color-grey-700);
  --podium-cds-icon-button-color-bg-tertiary-hover-on-light: var(--podium-cds-color-grey-200);
  --podium-cds-icon-button-color-bg-tertiary-hover-on-dark: var(--podium-cds-color-grey-700);

  --podium-cds-button-color-bg-primary-disabled-on-dark: var(--podium-cds-color-grey-500);
  --podium-cds-button-color-bg-primary-disabled-on-light: var(--podium-cds-color-grey-200);
  --podium-cds-button-color-bg-primary-disabled: #707072;
  --podium-cds-button-color-bg-primary-hover-on-dark: var(--podium-cds-color-grey-300);
  --podium-cds-button-color-bg-primary-hover-on-light: var(--podium-cds-color-grey-500);
  --podium-cds-button-color-bg-primary-hover: var(--podium-cds-color-grey-300);
  --podium-cds-button-color-bg-primary-on-dark: var(--podium-cds-color-black);
  --podium-cds-button-color-bg-primary-on-light: var(--podium-cds-color-white);
  --podium-cds-button-color-bg-primary: var(--podium-cds-color-white);

  --podium-cds-button-color-border-secondary-disabled-on-dark: var(--podium-cds-color-grey-600);
  --podium-cds-button-color-border-secondary-disabled: var(--podium-cds-color-grey-300);
  --podium-cds-button-color-border-secondary-hover-on-dark: var(--podium-cds-color-white);
  --podium-cds-button-color-border-secondary-hover: var(--podium-cds-color-white);
  --podium-cds-button-color-border-secondary-on-dark: var(--podium-cds-color-grey-400);
  --podium-cds-button-color-border-secondary-on-light: var(--podium-cds-color-grey-300);
  --podium-cds-button-color-border-secondary: var(--podium-cds-color-grey-400);

  --podium-cds-color-warning-inverse: var(--podium-cds-color-yellow-200);
  --podium-cds-color-warning: var(--podium-cds-color-yellow-100);

  --podium-cds-color-info-inverse: var(--podium-cds-color-blue-500);
  --podium-cds-color-info: var(--podium-cds-color-blue-400);

  --podium-cds-color-success-inverse: var(--podium-cds-color-success-inverse-for-dark-themes);
  --podium-cds-color-success: var(--podium-cds-color-success-for-dark-themes);

  --podium-cds-color-critical-inverse: var(--podium-cds-color-red-600);
  --podium-cds-color-critical: var(--podium-cds-color-red-400);

  --podium-cds-color-border-disabled-on-dark: var(--podium-cds-color-grey-700);
  --podium-cds-color-border-disabled-on-light: var(--podium-cds-color-grey-300);
  --podium-cds-color-border-disabled: var(--podium-cds-color-grey-700);
  --podium-cds-color-border-active-on-dark: var(--podium-cds-color-white);
  --podium-cds-color-border-active-on-light: var(--podium-cds-color-black);
  --podium-cds-color-border-active-inverse: var(--podium-cds-color-black);
  --podium-cds-color-border-active: var(--podium-cds-color-white);
  --podium-cds-color-border-primary-inverse: var(--podium-cds-color-grey-500);
  --podium-cds-color-border-primary-on-light: var(--podium-cds-color-grey-500);
  --podium-cds-color-border-primary-on-dark: var(--podium-cds-color-border-primary);
  --podium-cds-color-border-primary: #9e9ea0;
  --podium-cds-color-border-secondary: #4b4b4d;
  --podium-cds-color-border-tertiary: var(--podium-cds-color-grey-700);
  --podium-cds-color-border-success: var(--podium-cds-color-green-500);
  --podium-cds-color-border-critical: var(--podium-cds-color-red-400);

  --podium-cds-color-text-disabled-on-dark: var(--podium-cds-color-grey-600);
  --podium-cds-color-text-disabled-on-light: var(--podium-cds-color-grey-400);
  --podium-cds-color-text-disabled-inverse: var(--podium-cds-color-grey-400);
  --podium-cds-color-text-disabled: var(--podium-cds-color-grey-600);
  --podium-cds-color-text-hover-on-dark: var(--podium-cds-color-grey-200);
  --podium-cds-color-text-hover-on-light: var(--podium-cds-color-grey-500);
  --podium-cds-color-text-hover-inverse: var(--podium-cds-color-grey-600);
  --podium-cds-color-text-hover: var(--podium-cds-color-grey-200);
  --podium-cds-color-text-secondary-on-dark: var(--podium-cds-color-grey-400);
  --podium-cds-color-text-secondary-on-light: var(--podium-cds-color-grey-500);
  --podium-cds-color-text-secondary-inverse: var(--podium-cds-color-grey-500);
  --podium-cds-color-text-secondary: var(--podium-cds-color-grey-400);
  --podium-cds-color-text-primary-on-dark: var(--podium-cds-color-black);
  --podium-cds-color-text-primary-on-light: var(--podium-cds-color-white);
  --podium-cds-color-text-primary-inverse: var(--podium-cds-color-black);
  --podium-cds-color-text-primary: var(--podium-cds-color-white);
  --podium-cds-color-text-critical: var(--podium-cds-color-red-400);
  --podium-cds-color-text-success: var(--podium-cds-color-success-for-dark-themes);
  --podium-cds-color-text-link: var(--podium-cds-color-blue-400);
  --podium-cds-color-text-badge: var(--podium-cds-color-ruby);

  --podium-cds-color-bg-primary-on-light: var(--podium-cds-color-black);
  --podium-cds-color-bg-primary-on-dark: var(--podium-cds-color-white);
  --podium-cds-color-bg-primary-inverse: color-mix(
    in srgb,
    var(--podium-cds-color-white) 13%,
    transparent
  );
  --podium-cds-color-bg-secondary-inverse: color-mix(
    in srgb,
    var(--podium-cds-color-black) 5%,
    transparent
  );
  --podium-cds-color-bg-secondary-inverse: color-mix(
    in srgb,
    var(--podium-cds-color-black) 5%,
    transparent 95%
  );

  --podium-cds-color-bg-primary: var(--podium-cds-color-phoenix);
  --podium-cds-color-bg-secondary: var(--podium-cds-color-black);
  --podium-cds-color-bg-hover-inverse: var(--podium-cds-color-grey-200);
  --podium-cds-color-bg-hover: var(--podium-cds-color-grey-700);
  --podium-cds-color-bg-disabled-inverse: var(--podium-cds-color-grey-200);
  --podium-cds-color-bg-disabled: var(--podium-cds-color-grey-600);
  --podium-cds-color-bg-modal: var(--podium-cds-color-grey-800);
  --podium-cds-color-bg-warning: var(--podium-cds-color-yellow-100);
  --podium-cds-color-bg-critical: var(--podium-cds-color-red-400);
  --podium-cds-color-bg-success: var(--podium-cds-color-success-for-dark-themes);
  --podium-cds-color-bg-on-image-secondary: #707072;
  --podium-cds-color-bg-on-image-primary: var(--podium-cds-color-grey-200);
  --podium-cds-color-bg-active: var(--podium-cds-color-grey-700);

  /* New tokens */
  --podium-cds-color-border-dimmed: #707072;
  --podium-cds-color-border-unselected: var(--podium-cds-color-border-secondary);
  --podium-cds-color-text-accent: var(--podium-cds-color-text-badge);
  --podium-cds-color-text-dimmed-for-dark-themes: #9e9ea0;
  --podium-cds-color-bg-disabled-dimmed-for-dark-themes: color-mix(
    in srgb,
    var(--podium-cds-color-black 35%),
    transparent 65%
  );
  --podium-cds-color-bg-badge: var(--podium-cds-color-black);
  --podium-cds-color-text-product-badge: var(--podium-cds-color-text-primary);
  --podium-cds-color-text-always-dark: var(--podium-cds-color-black);
  --podium-cds-icon-button-color-bg-always-dark: var(--podium-cds-color-white);
  --podium-cds-color-bg-notification: color-mix(
    in srgb,
    var(--podium-cds-color-myrhh) 30%,
    transparent 70%
  );
  --podium-cds-color-success-for-dark-themes: #A89687;
  --podium-cds-color-success-inverse-for-dark-themes: #8A5A3D;

  color: var(--podium-cds-color-text-primary);
  background-color: var(--podium-cds-color-bg-primary);
  
  button.nds-btn {
    --podium-cds-color-text-primary-on-dark: var(--podium-cds-color-black);
    --podium-cds-color-text-primary-on-light: var(--podium-cds-color-white);
    --podium-cds-color-bg-disabled: var(--podium-cds-button-color-bg-primary-disabled);
  }

  /* Target Bellotti marketing modals to fix white text on white buttons */
  div.modal-content button.nds-btn.btn-primary-dark[style="color: #fff;"],
  div.modal-content button.nds-btn.btn-primary-dark[style="color: rgb(255, 255, 255);"] {
    color: var(--podium-cds-color-text-primary-inverse) !important;
  }

  details.nds-details {
    box-shadow: inset 0 -1px 0 0 var(--podium-cds-color-border-primary);
  }

  /* Global nav Geo Mismatch overrides */
  .geomismatch-modal-menu[role='modal'] {
    box-shadow: rgba(0, 0, 0, 0.48) 0px 0px 15px 3px;
  }

  .geomismatch-modal-menu button.mismatch-country-button.btn-primary-dark,
  .geomismatch-modal-menu button.language-button.btn-primary-dark {
    color: var(--podium-cds-color-text-primary-inverse);
  }

  .geomismatch-modal-menu:not([role='modal']) div.expanded {
    background-color: var(--podium-cds-color-white);
  }
  
  .language-modal-root .locale-label-container {
    color: var(--podium-cds-color-text-primary);
  }

}

  section.nds-carousel
  div.carousel-header
  div.nav-btn-wrapper
  button.carousel-btn {
  --podium-cds-color-text-disabled: var(--podium-cds-icon-button-color-bg-disabled);
  & .icon {
    background-color: color-mix( in srgb, var(--podium-cds-color-myrhh) 30%, transparent ); 
  }

  &:hover:not(:disabled) .icon {
    background-color: color-mix( in srgb,var(--podium-cds-color-myrhh) 70%, transparent );
    color: var(--podium-cds-icon-button-color-bg-primary);
  }

  &:disabled .icon {
    background-color: color-mix( in srgb, var(--podium-cds-color-myrhh) 30%, transparent);
  }
}
/* CICLP cart error dialog overrides */
#nike-shop-root .modal-container{
  background-color: var(--podium-cds-color-bg-primary);
  [data-automation="error-message-container"]{
    background-color: var(--podium-cds-color-bg-primary);
  }
}

/* Global Nav overrides */
#commerce-header-v2-wrapper nav.pre-l-header-container > header,
#commerce-header-v2-wrapper nav.pre-l-header-container > header ul.desktop-category li *,
#commerce-header-v2-wrapper nav.pre-l-header-container > header form div.bar-search-results-tray {
  background-color: #1e1817;
}
/* make the swoosh primary text color */
a.swoosh-link {
  color: var(--podium-cds-color-text-primary);
}

#commerce-header-v2-wrapper nav.pre-l-header-container div[data-testid="top-bar-container"] {
  background-color: #161211;
}

#commerce-header-v2-wrapper nav.pre-l-header-container .search-input-container:not(:hover):not(:active),
#commerce-header-v2-wrapper nav.pre-l-header-container .search-input-container #nav-search-icon:not(:hover):not(:active)
{
  background-color: #161211;
}

/* PDP Overrides */

.modal-portal-content-wrapper .close-btn-container button.nds-btn.nds-button--icon-only[data-testid="modal-close-button"],
.modal-portal-content-wrapper .modal-header-container button.nds-btn.nds-button--icon-only {
  --podium-cds-icon-button-color-bg-secondary: var(--podium-cds-color-white);

  & svg path {
    color: var(--podium-cds-color-black);
  }
}

div[data-testid="pdp-modal"].modal.open div.modal-container button.nds-btn.nds-button--icon-only {
  --podium-cds-icon-button-color-bg-secondary: var(--podium-cds-color-grey-100);

    &:hover {
      background-color: var(--podium-cds-color-grey-300);
    }

    &:hover:before {
      border-color: var(--podium-cds-color-grey-300);
    }
  
    & svg path {
    color: var(--podium-cds-color-black);
  }
}

/* Dark background for overscrolling on <body> tag */
html body {
  background-color: #161211;
}