_wide-navigation.scss

// ==================================================================
// Navigation
// ==================================================================
.sprk-c-WideNavigation {
  background-color: $white;
  display: flex;
  list-style-type: none;
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: $masthead-column-width;
}

.sprk-c-WideNavigation__sub-menu-container {
  position: absolute;
  z-index: $layer-height-m;
  width: 100%;
}

.sprk-c-WideNavigation--sub {
  border: 2px solid $gray;
  box-shadow: $btn-shadow;
  display: block;
  margin-top: $space-s;
}

.sprk-c-WideNavigation__item--sub {
  background-color: $white;
  line-height: $space-m;
  text-align: left;
  width: 100%;
}

.sprk-c-WideNavigation__item {
  flex: auto;
  line-height: $space-l;
  position: relative;
  text-align: center;
  white-space: nowrap;
}

.sprk-c-WideNavigation__item--active > .sprk-c-WideNavigation__link {
  font-weight: bold;
}

.sprk-c-WideNavigation__item.sprk-u-FocusWithin:not(.sprk-c-WideNavigation__item--sub) > .sprk-c-WideNavigation__link,
.sprk-c-WideNavigation__item:focus-within:not(.sprk-c-WideNavigation__item--sub) > .sprk-c-WideNavigation__link,
.sprk-c-WideNavigation__item--open > .sprk-c-WideNavigation__link,
.sprk-c-WideNavigation__item--active > .sprk-c-WideNavigation__link {
  &::after {
    background-color: $black;
    content: ' ';
    height: 3px;
    display: block;
    width: 85%;
    margin-right: auto;
    margin-left: auto;
  }
}

.sprk-c-WideNavigation__link {
  @include HoverLine($color: $white, $width: 85%);

  border: 0;
  color: $black;
  display: block;
  text-decoration: none;
  width: 100%;

  &:active,
  &:focus,
  &:hover {
    @include HoverLine($color: $black, $width: 85%);
  }
}

.sprk-c-WideNavigation__link--sub {
  border: 0;
  font-weight: normal;
  line-height: $line-height-body-two;
  padding: $space-m;
  text-align: left;
  text-transform: none;
  white-space: normal;

  &::after {
    display: none;
  }

  &:active,
  &:focus,
  &:hover {
    background-color: $gray;
    font-weight: normal;

    &::after {
      display: none;
    }
  }
}

.sprk-c-WideNavigation__arrow {
  fill: $black;
  width: $icon-m;
  margin: -3px $space-s 0 $space-s; // negative margin to visually align the arrow
}