/**
 * @file
 * Styles for primary navigation when JavaScript is disabled.
 */

@import "../../base/media-queries.pcss.css";

:root {
  --no-js-nav-column-width: 300px;
  --no-js-nav-column-gap: var(--sp2);
}

html:not(.js) {
  /**
   * Mobile styles for primary navigation when JS is disabled.
   */
  @media (--max-nav) {
    & .primary-nav__menu--level-1 {
      column-width: var(--no-js-nav-column-width);
      column-gap: var(--no-js-nav-column-gap);
    }

    & .primary-nav__menu-item {
      break-inside: avoid;
    }

    & .site-header__inner__container {
      flex-wrap: wrap;
    }

    & .mobile-buttons {
      display: none;
    }

    & .header-nav {
      position: static;
      visibility: visible;
      flex-basis: 100%;
      width: 100%;
      max-width: none;
      margin-block: var(--sp2) 0;
      margin-inline-start: var(--sp2);
      margin-inline-end: var(--sp2);
      padding-block: var(--sp2) 0;
      padding-inline-start: var(--sp2);
      padding-inline-end: var(--sp2);
      transform: none;
      border: solid 1px var(--color--gray-95) !important;
      box-shadow: 0 0 36px var(--color--gray-90);
    }

    & .primary-nav__menu--level-2 {
      border-inline-start: 0;
    }

    & .primary-nav__button-toggle {
      display: none;
    }

    & .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
      &::before,
      &::after {
        content: none;
      }
    }
  }

  @media (--nav) {
    /**
     * Styles for 'always on mobile navigation' when JS is disabled.
     */
    & body.is-always-mobile-nav {
      & .primary-nav__menu--level-1 {
        column-width: var(--no-js-nav-column-width);
        column-gap: var(--no-js-nav-column-gap);
      }

      & .primary-nav__menu-item {
        break-inside: avoid;
      }

      & .site-header__inner__container {
        flex-wrap: wrap;
      }

      & .mobile-buttons {
        display: none;
      }

      & .header-nav {
        position: static;
        visibility: visible;
        flex-basis: 100%;
        width: 100%;
        max-width: none;
        margin-block: var(--sp2) 0;
        margin-inline-start: var(--sp2);
        margin-inline-end: var(--sp2);
        padding-block: var(--sp2) 0;
        padding-inline-start: var(--sp2);
        padding-inline-end: var(--sp2);
        transform: none;
        border: solid 1px var(--color--gray-95) !important;
        box-shadow: 0 0 36px var(--color--gray-90);
      }

      & .primary-nav__menu--level-2 {
        border-inline-start: 0;
      }

      & .primary-nav__button-toggle {
        display: none;
      }

      & .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
        &::before,
        &::after {
          content: none;
        }
      }
    }

    /**
     * Styles for traditional dropdown primary navigation when JS is disabled.
     */
    & body:not(.is-always-mobile-nav) {
      & .primary-nav__menu-item--level-1:hover {
        & .primary-nav__menu--level-2,
        & .primary-nav__menu-🥕 {
          visibility: visible;
          transform: translate(-50%, 0);
          opacity: 1;
        }
      }

      /*
       * Cannot combine the focus-within pseudo selector with other selectors,
       * because it will break IE11 and earlier versions of MS Edge.
       */
      & .primary-nav__menu-item--level-1:focus-within {
        & .primary-nav__menu--level-2,
        & .primary-nav__menu-🥕 {
          visibility: visible;
          transform: translate(-50%, 0);
          opacity: 1;
        }
      }
    }
  }
}