$dwp-horizontal-navigation-max-width: 960px !default;
$dwp-horizontal-navigation-breakpoint: 400px !default;

.dwp-horizontal-navigation {
  @include govuk-font(19);

  &__wrapper {
    background-color: govuk-colour("black", $variant: "tint-95");
  }

  &__container {
    max-width: $dwp-horizontal-navigation-max-width;
    margin: 0 auto;
    padding: 0 govuk-spacing(6);
    border: 0;

    @include govuk-media-query($until: tablet) {
      padding: 0 govuk-spacing(3);
    }
  }

  &__list {
    @include govuk-clearfix;

    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: inset 0 -1px 0 govuk-functional-colour(border);
    list-style: none;

    @media (forced-colors) {
      border-bottom: 1px solid govuk-functional-colour(border);
    }

    @include govuk-media-query($until: $dwp-horizontal-navigation-breakpoint) {
      padding-bottom: govuk-spacing(2);
    }

    &--no-line {
      border-bottom: 0;
      box-shadow: none;
    }
  }

  &__item {
    box-sizing: border-box;
    display: block;
    position: relative;
    padding-top: govuk-spacing(2);
    padding-bottom: govuk-spacing(2);

    @include govuk-media-query($from: $dwp-horizontal-navigation-breakpoint) {
      margin-right: govuk-spacing(4);
      float: left;
    }

    &:last-child {
      margin-right: 0;
    }

    &--selected {
      padding-bottom: govuk-spacing(1);
      border-bottom: $govuk-border-width solid govuk-functional-colour(brand);

      @include govuk-media-query($until: $dwp-horizontal-navigation-breakpoint) {
        margin-bottom: govuk-spacing(1);

        &:last-of-type {
          margin-bottom: govuk-spacing(2);
        }
      }

      @include govuk-media-query($from: $dwp-horizontal-navigation-breakpoint) {
        padding-bottom: govuk-spacing(2);
      }

      .dwp-horizontal-navigation__link:link, .dwp-horizontal-navigation__link:visited {
        color: govuk-functional-colour(text);
      }
    }
  }

  &__link {
    @include govuk-link-common;
    @include govuk-link-style-no-visited-state;
    @include govuk-link-style-no-underline;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }
}