_patterns_subnav.scss

@import 'settings';

@mixin vf-p-subnav {
  $color-navigation-background: $color-x-light !default;

  .p-subnav {
    position: relative;
  }

  .p-subnav::after {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    display: block;
    height: $spv-inner--large;
    pointer-events: none;
    position: absolute;
    right: calc(#{$sph-inner--small} + 1px); // 1px for the border on selects. this aligns itr with any selects underneath
    text-indent: calc(100% + 10rem);
    top: $spv-inner--large;
    width: $sph-inner;
  }

  .p-subnav.is-active {
    &::after {
      transform: rotate(180deg);
    }

    .p-subnav__items,
    .p-subnav__items--right {
      display: block;
    }
  }

  %subnav-link {
    padding-right: 2 * $sph-inner--small + map-get($icon-sizes, default); // icon padded with the default padding-right of selects, inputs etc.
  }

  .p-subnav > .p-navigation__link {
    // remove nesting in 3.0 when deprecated __link styles are removed
    @extend %subnav-link;
  }

  @include deprecate('3.0.0', 'Use .p-navigation__items, .p-navigation__item, .p-navigation__link classes instead.') {
    .p-subnav > a {
      @extend %subnav-link;
    }
  }

  // Theming
  @if ($theme-default-nav == 'dark') {
    .p-subnav::after {
      @include vf-icon-chevron($colors--dark-theme--border-high-contrast);
    }

    .p-subnav__item {
      @extend %subnav-item--dark-theme;
    }

    .p-subnav.is-light,
    .p-navigation.is-light .p-subnav {
      &::after {
        @include vf-icon-chevron($colors--light-theme--border-high-contrast);
      }

      .p-subnav__item {
        @extend %subnav-item--light-theme;
      }
    }
  } @else {
    .p-subnav::after {
      @include vf-icon-chevron($colors--light-theme--border-high-contrast);
    }

    .p-subnav__item {
      @extend %subnav-item--light-theme;
    }

    .p-subnav.is-dark,
    .p-navigation.is-dark .p-subnav {
      &::after {
        @include vf-icon-chevron($colors--dark-theme--border-high-contrast);
      }

      .p-subnav__item {
        @extend %subnav-item--dark-theme;
      }
    }
  }

  .p-subnav__items,
  .p-subnav__items--right {
    @extend %vf-has-box-shadow;
    @extend %vf-has-round-corners;
    display: none;
    margin: 0;
    min-width: 100%;
    padding: 0;
    z-index: 5;

    @media (min-width: $breakpoint-navigation-threshold + 1) {
      clip: rect(0, 1000px, 1000px, -10px); /* Clip the top of the box-shadow off */
      position: absolute;
      top: calc(#{$spv-inner--medium * 4} - 1px);
    }

    @media (max-width: $breakpoint-navigation-threshold) {
      box-shadow: none;
    }
  }

  .p-subnav__items--right {
    right: 0;
  }

  .p-subnav__item {
    display: block;
    white-space: nowrap;

    @media (max-width: $breakpoint-navigation-threshold) {
      padding: $spv-inner--small 0;
    }

    @media (min-width: $breakpoint-navigation-threshold) {
      padding: $spv-inner--medium $sph-inner;
    }

    &,
    &:active,
    &:focus,
    &:hover,
    &:visited {
      text-decoration: none;
    }
  }

  %subnav-item--light-theme {
    background-color: $colors--light-theme--background;

    &,
    &:active,
    &:focus,
    &:visited {
      color: $colors--light-theme--text-default;
    }

    &:hover {
      color: $colors--light-theme--text-hover;
    }

    &::before {
      @media (max-width: $breakpoint-navigation-threshold) {
        // separator color on small screens
        background: $colors--light-theme--border-default;
      }
    }
  }

  %subnav-item--dark-theme {
    background-color: $colors--dark-theme--background-highlighted;

    &,
    &:active,
    &:focus,
    &:visited {
      color: $colors--dark-theme--text-default;
    }

    &:hover {
      color: $colors--dark-theme--text-hover;
    }

    &::before {
      @media (max-width: $breakpoint-navigation-threshold) {
        // separator color on small screens
        background: $colors--dark-theme--border-default;
      }
    }
  }
}