/**
 * @file
 * Secondary navigation styling.
 */

/*
 * Media query breakpoints.
 * Processed by postcss/postcss-custom-media.
 */

/* Navigation related breakpoints */

/* Grid related breakpoints */

/* Grid shifts from 6 to 14 columns. */

/* Width of the entire grid maxes out. */

.secondary-nav {
  letter-spacing: 0.02em;
  font-size: var(--font-size-s);
  font-weight: 600;
}

.secondary-nav__menu {
  display: flex;
  align-items: center;
  margin-block: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-block: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
  list-style: none;
}

.secondary-nav__menu-item {
  /* Parent element is set to flex-basis: 0. We
   * don't want text to wrap unless it goes over a
   * certain arbitrary width.
   */

  /* @todo should this be scoped to desktop nav? */
  width: -moz-max-content;
  width: max-content;
  max-width: 200px;
}

.secondary-nav__menu-item:not(:last-child) {
    margin-inline-end: var(--sp1-5);
  }

.secondary-nav__menu-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.secondary-nav__menu-link::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    content: "";
    transition:
      opacity 0.2s,
      transform 0.2s;
    transform: translateY(5px);
    opacity: 0;
    /* Intentionally not using CSS logical properties. */
    border-top: solid 2px currentColor;
  }

.secondary-nav__menu-link:hover::after {
      transform: translateY(0);
      opacity: 0.8;
    }

@media (min-width: 1200px) {
    body:not(.is-always-mobile-nav) .secondary-nav {
      position: relative;
      display: flex;
      margin-inline-start: var(--sp);
      padding-inline-start: var(--sp2);
    }

      body:not(.is-always-mobile-nav) .secondary-nav::before {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 0;
        width: 2px;
        height: var(--sp2);
        content: "";
        transform: translateY(-50%);
        background-color: var(--color--gray-90);
      }

    body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
      margin-inline-end: var(--sp2);
    }
      body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus {
        position: relative;
        outline: 0;
        padding-block: var(--sp0-5);
      }

        body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus::before {
          position: absolute;
          top: 50%;
          left: 50%;
          width: calc(100% + var(--sp));
          height: 100%;
          content: "";
          transform: translate(-50%, -50%);
          border: solid 2px var(--color--primary-50);
          border-radius: 4px;
        }
  }