////
/// @group components
////

/// Stacked navigation component.
/// Expands to fill the available space.
/// Usually full width on mobile and 1/3 on wider screens.
.stacked-nav {
  background: #fafafa;
  border: 1px solid $colour-border;
  margin: em(0 0 $spacing-large);

  a {
    color: $colour-link;
    display: block;
    padding: em($spacing-small);
    position: relative;
    text-decoration: none;

    &[aria-current='page'] {
      background: $colour-nice-grey-3;
      font-weight: bold;

      &:before {
        background: $colour-icons;
        content: '';
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: em($spacing-x-small);
      }
    }

    &:hover {
      background: $colour-nice-grey-2;
    }

    &:active {
      background: $colour-icons;
      color: $colour-link-inverse;
    }
  }

  // The title nav link
  &__root {
    @include font-size(h6);
    border-bottom: 1px solid $colour-border;
    font-weight: bold;
    margin: 0;

    a {
      color: $colour-text;
    }
  }

  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  &__list-item {
    border-top: 1px solid $colour-border;
  }

  @media print {
    display: none;
  }
}

////
/// @group components
////

/// Stacked navigation component.
/// Expands to fill the available space.
/// Usually full width on mobile and 1/3 on wider screens.
.stacked-nav {
  background: $colour-nice-white;
  border: 1px solid $colour-border;
  margin: em(0 0 $spacing-large);

  a {
    color: $colour-link;
    display: block;
    padding: em($spacing-small);
    position: relative;
    text-decoration: none;

    &[aria-current='page'] {
      background: $colour-nice-grey-3;
      font-weight: bold;

      &:before {
        background: $colour-icons;
        content: '';
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: em($spacing-x-small);
      }
    }

    &:hover {
      background: $colour-nice-grey-2;
    }

    &:active {
      background: $colour-icons;
      color: $colour-link-inverse;
    }
  }

  // The title nav link
  &__root {
    @include font-size(h6);
    border-bottom: 1px solid $colour-border;
    font-weight: bold;
    margin: 0;

    a {
      color: $colour-text;
    }
  }

  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  &__list-item {
    border-top: 1px solid $colour-border;
  }

  @media print {
    display: none;
  }
}

Tweak stacked nav background to white
Tweak stacked nav background to white
