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

.secondary-nav {
  letter-spacing: 0.02em;
  font-size: 1.1111rem;
  font-weight: 600;
}

[dir="ltr"] .secondary-nav__menu {
  margin-left: 0;
}

[dir="rtl"] .secondary-nav__menu {
  margin-right: 0;
}

[dir="ltr"] .secondary-nav__menu {
  margin-right: 0;
}

[dir="rtl"] .secondary-nav__menu {
  margin-left: 0;
}

[dir="ltr"] .secondary-nav__menu {
  padding-left: 0;
}

[dir="rtl"] .secondary-nav__menu {
  padding-right: 0;
}

[dir="ltr"] .secondary-nav__menu {
  padding-right: 0;
}

[dir="rtl"] .secondary-nav__menu {
  padding-left: 0;
}

.secondary-nav__menu {
  display: flex;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 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: max-content;   max-width: 11.11111rem
}

[dir="ltr"] .secondary-nav__menu-item:not(:last-child) {
    margin-right: 1.5rem;
}

[dir="rtl"] .secondary-nav__menu-item:not(:last-child) {
    margin-left: 1.5rem;
}

.secondary-nav__menu-link {
  position: relative;   display: inline-flex;   align-items: center;   height: 2rem;   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(0.27778rem);
    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: 66.66667rem) {
    [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {       margin-left: 1rem;
  }
    [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {       margin-right: 1rem;
  }
    [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {       padding-left: 2rem;
  }
    [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {       padding-right: 2rem;
  }
    body:not(.is-always-mobile-nav) .secondary-nav {
      position: relative;       display: flex
    }       [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav:before {
        left: 0;
  }       [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav:before {
        right: 0;
  }       body:not(.is-always-mobile-nav) .secondary-nav:before {
        position: absolute;
        top: 50%;
        width: 2px;
        height: 2rem;
        content: "";
        transform: translateY(-50%);
        background-color: #d7e1e8;
      }

    [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
      margin-right: 2rem;
  }

    [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
      margin-left: 2rem;
  }
      body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus {
        position: relative;         outline: 0
      }         body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus:before {
          position: absolute;
          top: 50%;
          left: 50%;
          width: calc(100% + 1rem);
          height: 3rem;
          content: "";
          transform: translate(-50%, -50%);
          border: solid 2px #5c9ec8;
          border-radius: 0.22222rem;
        }
  }