.hmcts-primary-navigation {
  background-color: govuk-colour("black");
}


.hmcts-primary-navigation__container {
  @include hmcts-width-container;
  font-size: 0; // Hide whitespace between elements
  text-align: justify; // Trick to remove the need for floats

  &:after {
    content: '';
    display: inline-block;
    width: 100%;
  }

}

.hmcts-primary-navigation__nav {
  text-align: left;
  @include mq($from: desktop) {
    display: inline-block;
    vertical-align: middle;
  }

}


.hmcts-primary-navigation__list {
  font-size: 0; // Removes white space when using inline-block on child element.
  list-style: none;
  margin: 0;
  padding: 0;
}


.hmcts-primary-navigation__item {
  @include govuk-font($size: 19, $weight: bold);
  display: inline-block;
  margin-right: govuk-spacing(4);
  margin-top: 0;

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

}


.hmcts-primary-navigation__link {
  display: block;
  padding-bottom: 13px;
  padding-top: 12px;
  text-decoration: underline;

  &:link,
  &:visited {
    color: govuk-colour("white");
  }

  &:focus {
    color: govuk-colour("black"); // Focus colour on yellow should really be black.
    position: relative; // Ensure focus sits above everything else.
    z-index: 1;
  }

  &[aria-current] {
    color: govuk-colour("white");
    position: relative;
    text-decoration: none;

    &:before {
      background-color: govuk-colour("white");
      content: "";
      display: block;
      height: 5px;
      position: absolute; bottom: 0; left: 0;
      width: 100%;
    }

    &:focus {
      color: govuk-colour("black"); // Focus colour on yellow should really be black.
      position: relative; // Ensure focus sits above everything else.

      &:before {
        background-color: govuk-colour("black");
      }

    }

  }

}


.hmcts-primary-navigation__search {

  @include mq($from: desktop) {
    display: inline-block;
    vertical-align: middle;
  }

}