/* ==========================================================================
   #SECONDARY NAV
   ========================================================================== */

.hmcts-sub-navigation {
  margin-bottom: govuk-spacing(7);
}


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

  @include mq($from: tablet) {
    box-shadow: inset 0 -1px 0 $govuk-border-colour;
    width: 100%;
  }

  // IE8 does not support box shadow, so use a standard border.
  @include govuk-if-ie8 {
    border-bottom: 1px solid $govuk-border-colour;
  }

}


.hmcts-sub-navigation__item {
  @include govuk-font(19);
  box-shadow: inset 0 -1px 0 $govuk-border-colour;
  display: block;
  margin-top: -1px;

  &:last-child {
    box-shadow: none;
  }

  @include mq($from: tablet) {
    box-shadow: none;
    display: inline-block;
    margin-right: govuk-spacing(4);
    margin-top: 0;
  }

}


.hmcts-sub-navigation__link {
  display: block;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: govuk-spacing(3);
  text-decoration: underline;

  @include mq($from: tablet) {
    padding-left: 0;
  }

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

}


.hmcts-sub-navigation__link[aria-current="page"] {
  color: govuk-colour("black");
  position: relative;
  text-decoration: none;

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

    @include mq($from: tablet) {
      height: 5px;
      width: 100%;
    }

  }

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

}