nav-secondary.pcss.css

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

@import "../../base/variables.pcss.css";

.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: max-content;
  max-width: 200px;

  &:not(:last-child) {
    margin-inline-end: var(--sp1-5);
  }
}

.secondary-nav__menu-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--sp2);
  text-decoration: none;
  color: inherit;

  &: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;
  }

  &:hover {
    &:after {
      transform: translateY(0);
      opacity: 0.8;
    }
  }
}

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

      &: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-70);
      }
    }

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

    & .secondary-nav__menu-link {
      &:focus {
        position: relative;
        outline: 0;

        &:before {
          position: absolute;
          top: 50%;
          left: 50%;
          width: calc(100% + var(--sp));
          height: var(--sp3);
          content: "";
          transform: translate(-50%, -50%);
          border: solid 2px var(--color--blue-50);
          border-radius: 4px;
        }
      }
    }
  }
}