.fsa-nav-global {

  $nav-bgcolor: $color-fsa-white;
  $nav-border-color: $color-fsa-tertiary-200;
  $nav-text-color: $color-fsa-tertiary-300;

  $nav-highlight-color: $color-fsa-secondary;
  $nav-highlight-bgcolor: $color-fsa-secondary-900;
  $nav-highlight-text-color: $color-fsa-secondary-100;
  $nav-highlight-text-color-strong: $white;

  $nav-spacing-unit: $size-default;

  & {
    width: 100%;
    @media print {
      border-bottom-color: $color-fsa-tertiary-200;
    }

    @include breakpoint(L) {
      border-bottom: 1px solid $nav-border-color;
      background-color: $nav-bgcolor;
    }

  }

  &--fullscreen {
    @include breakpoint(L) {
      padding-left: $nav-spacing-unit;
      padding-right: $nav-spacing-unit;
    }
  }

  &:focus-within {
    z-index: 999;
  }

  &__bd {

    & {
      margin-left: auto;
      margin-right: auto;
      padding: 0;
      max-width: ($site-max-width + 24px);
    }

    .fsa-nav-global--fullscreen > & {
      max-width: none;
    }

    @include breakpoint(L) {
      display: flex;
      align-items: center;
    }

    @media print {
      max-width: none;
    }

  }

  &__list {

    & {
      @include reset-ul();
      display: flex;
      position: relative;
      flex-wrap: wrap;
      z-index: 3;
    }

    &:focus-within {
      z-index: 99;
    }

    @include breakpoint(L) {
      flex: 1;
      flex-wrap: nowrap;
    }

  }

  &__search,
  &__aside {
    margin: $size-default $size-default 0;
    @include breakpoint(L) {
      margin: 0 $size-default 1px;
    }
  }

  &__list-item {

    & {
      @include reset-li();
      display: inline-block;
      flex: auto;
      flex-basis: 100%;
    }

    @media (min-width: 320px) {
      flex-basis: 50%;
    }

    @include breakpoint(S) {
      flex-basis: 33%;
    }

    @media (min-width: 768px) {
      flex-basis: auto;
    }

    @include breakpoint(L) {
      position: relative;
      flex: none;
    }

    &--multi-column {
      @include breakpoint(L) {
        position: static;
      }
    }

    // scss-lint:disable all

    @include breakpoint(L, down) {
      border: 1px solid $nav-border-color;
      border-width: 0 1px 1px 0;
    }

  }

  &__link {

    & {
      @include font-size(2);
      background-color: $nav-bgcolor;
      border-width: 0;
      display: block;
      width: 100%; // block-level <button> elements don't automatically full-width themselves
      text-decoration: none;
      padding: 0;
      color: $nav-text-color;
      text-align: left;
    }

    @include breakpoint(M) {
      @include font-size(3);
      font-weight: $font-bold;
    }

    @include breakpoint(L) {
      padding-left: $nav-spacing-unit;
      padding-right: $nav-spacing-unit;
      background-color: transparent;
    }

    &:visited {
      color: $nav-text-color;
    }

    &:hover,
    &:focus {

      outline-offset: -2px;

      .fsa-nav-global__text {
        box-shadow: 0 ( math.div( -( math.div($nav-spacing-unit, 3) ), 2) ) 0 0 $nav-text-color inset;
      }

    }

    &--active {

      &:link,
      &:visited {
        color: $color-fsa-base;
      }

      .fsa-nav-global__text {

        box-shadow: 0 (-( math.div($nav-spacing-unit, 3) )) 0 0 $nav-highlight-color inset;

        @media print {
          box-shadow: none;
        }

      }

    }

    &[aria-expanded="true"] {

      background-color: $nav-highlight-bgcolor;
      color: $nav-highlight-text-color-strong;

      // scss-lint:disable TrailingSemicolon SpaceAfterPropertyColon
      @include breakpoint(L) {
        box-shadow:
          $size-base 0 0 0 $nav-highlight-bgcolor,
          -$size-base 0 0 0 $nav-highlight-bgcolor
        ;
      }

      .fsa-nav-global__text {
        @include breakpoint(L) {
          box-shadow: 0 ( -(math.div($nav-spacing-unit, 3)) ) 0 0 $nav-highlight-text-color-strong inset;
        }
      }

    }

  }

  &__text {

    & {
      display: flex;
      gap: $size-small;
      align-items: center;
      padding: ($nav-spacing-unit - $size-base) $nav-spacing-unit;
    }

    @include breakpoint(M) {
      padding: $nav-spacing-unit;
    }

    @include breakpoint(L) {
      white-space: nowrap;
      padding-left: 0;
      padding-right: 0;
    }

    // scss-lint:disable SelectorFormat
    .fsa-nav-global__link--has-sub-menu & {
      &:after {
        $size: $size-medium;
        content: '';
        width: ($size * .75);
        height: ($size * .75);
        margin-left: auto;
        background-image: url('#{$image-path}/material-design-icons/ic_expand_more_24px.svg');
        background-size: ($size - $size-base);
        background-repeat: no-repeat;
      }
    }

    [aria-expanded="true"] & {
      &:after {
        background-image: url('#{$image-path}/material-design-icons/ic_expand_more_white_24px.svg');
      }
    }

  }

  &__sub-menu {

    & {
      display: none;
      background-color: $nav-highlight-bgcolor;
      position: absolute;
      left: 0;
      right: 0;
      box-shadow: $shadow-size-overlay;
    }

    @include breakpoint(L) {
      top: 100%;
      width: 24rem;
      left: -$size-base;
    }

    .fsa-nav-global__list-item:last-child & {
      @include breakpoint(L) {
        right: -$size-base;
        left: auto;
      }

    }

    // scss-lint:disable SelectorFormat
    .fsa-nav-global__list-item--multi-column & {

      @include breakpoint(L) {
        left: 0;
        right: 0;
        width: auto;
      }

    }

    .fsa-nav-global__list-item--multi-column:last-child & {
      @include breakpoint(L) {
        right: 0;
        left: 0;
      }

    }

    &[aria-hidden="false"] {
      display: block;
    }

  }

  &__sub-menu-bd {

    padding: $nav-spacing-unit 0 math.div($nav-spacing-unit, 2);

    // scss-lint:disable SelectorFormat
    .fsa-nav-global__list-item--multi-column & {

      @include breakpoint(L) {
        columns: 4;
        column-gap: math.div($nav-spacing-unit, 2);
        padding-bottom: ($nav-spacing-unit + $size-base);
      }

    }

  }

  &__sub-menu-title {

    & {
      @include font-size(2);
      font-family: $font-sans;
      text-transform: uppercase;
      margin: 0;
      color: $nav-highlight-text-color-strong;
      padding: ($nav-spacing-unit - $size-base) ($nav-spacing-unit + $size-base) $size-base;
    }

    // scss-lint:disable SelectorFormat
    .fsa-nav-global__list-item--multi-column & {
    }

  }

  &__sub-menu-group {

    @include breakpoint(L) {
      break-inside: avoid;
      break-after: column;
      display: block;
      width: auto;
    }

  }

  &__sub-menu-list {

    & {
      @include reset-ul();
      @include font-size(1);
      margin-bottom: $size-base;
    }

    @include breakpoint(L) {
      @include font-size(3);
    }

  }

  &__sub-menu-item {
    @include reset-li();
  }

  &__sub-menu-link {

    $text-color: $nav-highlight-text-color;
    $text-color-highlight: $nav-highlight-text-color-strong;

    & {
      display: block;
      color: $text-color;
      text-decoration: none;
      padding: math.div($nav-spacing-unit, 3) ($nav-spacing-unit + $size-base);
    }

    &:visited {
      color: $text-color;
    }

    &:hover,
    &:focus {
      color: $text-color-highlight;
      text-decoration: underline;
      outline-offset: -3px;
    }

  }

}