.app-primary-navigation {
    @include govuk-font(19, $weight: bold);
    background-color: govuk-colour("light-grey");
    border-bottom: 1px solid $govuk-border-colour;
  }
  
  .govuk-phase-banner + .app-primary-navigation {
    margin-top: -1px;
  }
  
  .app-primary-navigation__list {
    @include govuk-clearfix;
    left: govuk-spacing(-3);
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    right: govuk-spacing(-3);
    width: calc(100% + #{govuk-spacing(6)});
  }
  
  .app-primary-navigation__item {
    box-sizing: border-box;
    display: block;
    float: left;
    line-height: 50px;
    height: 50px;
    padding: 0 govuk-spacing(3);
    position: relative;
  }
  
  .app-primary-navigation__item--current {
    border-bottom: $govuk-border-width-narrow solid $govuk-link-colour;
  
    &:hover {
      border-bottom-color: $govuk-link-hover-colour;
    }
  
    &:active {
      border-bottom-color: $govuk-link-active-colour;
    }
  }
  
  .app-primary-navigation__item--align-right {
    @include govuk-media-query($from: tablet) {
      float: right;
    }
  }
  
  .app-primary-navigation__link {
    @include govuk-link-common;
    @include govuk-link-style-no-visited-state;
    @include govuk-link-style-no-underline;
    @include govuk-typography-weight-bold;
  
    // Extend the touch area of the link to the list
    &:after {
      bottom: 0;
      content: "";
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  
  .app-primary-navigation__item--current .app-primary-navigation__link:hover {
    text-decoration: none;
  }