/**
 * @file
 * Nav primary (wide widths).
 *
 * Extends the corresponding Olivero stylesheet.
 *
 * @see core/themes/olivero/css/components/navigation/nav-primary-wide.css
 */

.primary-nav__menu-link--level-2 {
background-image: linear-gradient(var(--rcak-color--blue), var(--rcak-color--blue));
  background-size: 0% 2px;
  background-position: 0% 100%;
  background-repeat: no-repeat;
  transition: all .3s ease;
}
.primary-nav__menu-link--level-2:hover {
background-size: 100% 2px;
}

body:not(.is-always-mobile-nav) {
  @media (min-width: 75rem) {
    & .primary-nav__menu--level-2 {
      padding-block: var(--sp1);
      border-top: solid var(--rcak-color--green) var(--sp0-5);
      background: var(--color--gray-100);
      box-shadow: 0 1px 36px var(--color--gray-95)
    }

    & .primary-nav__menu-link--level-2 {
      color: var(--color--gray-0);
    }
    & .primary-nav__menu-🥕 {
      border-bottom: solid 10px var(--rcak-color--green);
    }
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 75rem) {
  html.js body:not(.is-always-mobile-nav) .primary-nav__menu--level-2,
  html.js body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {
    transition: none;
  }
}