<commit_before>/*
Side Navigation

A left-hand side navigation.
The navigation is not displayed at mobile breakpoint.
The .side-nav__link--mobile-tall class increases the height of the nav links to make them more clickable on touch screen devices.

Markup:
<div class="side-nav {{modifier_class}}">
  <ul class="side-nav__component">
    <li class="side-nav__list">
      <a class="side-nav__link side-nav__link--mobile-tall" href="#">Self Assessment</a>
    </li>
    <li class="side-nav__list side-nav__list--selected">
      <span class="side-nav__link side-nav__link--mobile-tall">Corporation Tax</span>
    </li>
    <li class="side-nav__list">
      <a class="side-nav__link side-nav__link--mobile-tall" href="#">Problems with this website</a>
    </li>
  </ul>
</div>

.side-nav--mobile-visible - Adding the .side-nav--mobile-visible class means the navigation visible at mobile breakpoint, and shows only the rightmost present element with the .side-nav__component class.

Styleguide Side Navigation
*/

.side-nav {
  overflow: hidden;
  display: none;
  @include media(tablet) {
    display: block;
  }
}

.side-nav--mobile-visible {
  display: block;
  .side-nav__component {
    display: none;
    @include media(tablet) {
        display: block;
    }
    &:last-child {
      display: block;
    }
  }
}

.side-nav__list {
  position: relative;
  list-style: none;
}

.side-nav__list--selected, .side-nav__list--selected:hover {
  .side-nav__link {
    color: $white;
    background-color: $govuk-blue;
  }
}

.side-nav__link {
  padding: $gutter/2.5 $gutter $gutter/3.75 $gutter/2;
  text-decoration: none;
  display: block;
  background-color: transparent;
  @include core-16;
  &:hover {
    background-color: $grey-8;
  }
  &:after {
    position: absolute;
    right: $gutter/3;
    top: 50%;
    transform: translateY(-50%);
    content: "\203A";
  }
}

.side-nav__link--mobile-tall {
  padding: $gutter/1.5 $gutter $gutter/1.5 $gutter/2;
  @include media(tablet) {
    padding: $gutter/2.5 $gutter $gutter/3.75 $gutter/2;
  }
}

.side-nav--child {
  margin-top: 0;
  border-right: none;
  border-left: 4px solid $light-grey;

  .side-nav__link {
    padding-left: $gutter/1.25;
  }

  .side-nav__list--selected {
    .side-nav__link {
      color: $govuk-blue;
      @include bold-16;
      background-color: transparent;
    }
  }
}

/*
Two-level

Two-level navigation shows a submenu to the right of the primary menu.

Markup:
<div class="side-nav">
  <ul class="side-nav__component {{modifier_class}} side-nav__quarter-width">
    <li class="side-nav__list side-nav__list--selected">
      <span class="side-nav__link">Self Assessment</span>
    </li>
    <li class="side-nav__list">
      <a class="side-nav__link" href="#">Corporation Tax</a>
    </li>
    <li class="side-nav__list">
      <a class="side-nav__link" href="#">Problems with this website</a>
    </li>
  </ul>
  <ul class="side-nav__component {{modifier_class}} side-nav__quarter-width">
    <li class="side-nav__list">
      <a class="side-nav__link" href="#">Tax return help</a>
    </li>
    <li class="side-nav__list">
      <a class="side-nav__link" href="#">Refund requests</a>
    </li>
    <li class="side-nav__list">
      <a class="side-nav__link" href="#">Questions about Self Assessment</a>
    </li>
  </ul>
</div>

.side-nav__component--tall -  gives the left border a minimum height. Useful when nav to left may be taller than the component's content.

Styleguide Side Navigation.two_level
*/

.side-nav__quarter-width {
  width: 100%;
  @include media(tablet) {
    position: relative;
    float: left;
    width: 25%;
    min-width: em(160);
  }
}

.side-nav__component {
  border-left: 0;
  &:first-child {
    border-left: 0;
  }
  @include media(tablet) {
    border-left: 1px solid #bfc1c3;<commit_msg>YTA-1719: Consolidate mobile visible classes<commit_after>/*
Side Navigation

A left-hand side navigation.
The navigation is not displayed at mobile breakpoint.

Markup:
<div class="side-nav {{modifier_class}}">
  <ul class="side-nav__component">
    <li class="side-nav__list">
      <a class="side-nav__link" href="#">Self Assessment</a>
    </li>
    <li class="side-nav__list side-nav__list--selected">
      <span class="side-nav__link">Corporation Tax</span>
    </li>
    <li class="side-nav__list">
      <a class="side-nav__link" href="#">Problems with this website</a>
    </li>
  </ul>
</div>

.side-nav--mobile-visible - makes the navigation visible at mobile breakpoint, and shows only the rightmost present element with the .side-nav__component class. It also increases the height of the nav links to make them more clickable on touch screen devices.

Styleguide Side Navigation
*/

.side-nav {
  overflow: hidden;
  display: none;
  @include media(tablet) {
    display: block;
  }
}

.side-nav--mobile-visible {
  display: block;
  .side-nav__component {
    display: none;
    @include media(tablet) {
        display: block;
    }
    &:last-child {
      display: block;
    }
  }
  .side-nav__link {
    padding: $gutter/1.5 $gutter $gutter/1.5 $gutter/2;
    @include media(tablet) {
      padding: $gutter/2.5 $gutter $gutter/3.75 $gutter/2;
    }
  }
}

.side-nav__list {
  position: relative;
  list-style: none;
}

.side-nav__list--selected, .side-nav__list--selected:hover {
  .side-nav__link {
    color: $white;
    background-color: $govuk-blue;
  }
}

.side-nav__link {
  padding: $gutter/2.5 $gutter $gutter/3.75 $gutter/2;
  text-decoration: none;
  display: block;
  background-color: transparent;
  @include core-16;
  &:hover {
    background-color: $grey-8;
  }
  &:after {
    position: absolute;
    right: $gutter/3;
    top: 50%;
    transform: translateY(-50%);
    content: "\203A";
  }
}

.side-nav--child {
  margin-top: 0;
  border-right: none;
  border-left: 4px solid $light-grey;

  .side-nav__link {
    padding-left: $gutter/1.25;
  }

  .side-nav__list--selected {
    .side-nav__link {
      color: $govuk-blue;
      @include bold-16;
      background-color: transparent;
    }
  }
}

/*
Two-level

Two-level navigation shows a submenu to the right of the primary menu.

Markup:
<div class="side-nav">
  <ul class="side-nav__component {{modifier_class}} side-nav__quarter-width">
    <li class="side-nav__list side-nav__list--selected">
      <span class="side-nav__link">Self Assessment</span>
    </li>
    <li class="side-nav__list">
      <a class="side-nav__link" href="#">Corporation Tax</a>
    </li>
    <li class="side-nav__list">
      <a class="side-nav__link" href="#">Problems with this website</a>
    </li>
  </ul>
  <ul class="side-nav__component {{modifier_class}} side-nav__quarter-width">
    <li class="side-nav__list">
      <a class="side-nav__link" href="#">Tax return help</a>
    </li>
    <li class="side-nav__list">
      <a class="side-nav__link" href="#">Refund requests</a>
    </li>
    <li class="side-nav__list">
      <a class="side-nav__link" href="#">Questions about Self Assessment</a>
    </li>
  </ul>
</div>

.side-nav__component--tall - gives the left border a minimum height. Useful when nav to left may be taller than the component's content.

Styleguide Side Navigation.two_level
*/

.side-nav__quarter-width {
  width: 100%;
  @include media(tablet) {
    position: relative;
    float: left;
    width: 25%;
    min-width: em(160);
  }
}

.side-nav__component {
  border-left: 0;
  &:first-child {
    border-left: 0;
  }
  @include media(tablet) {
    border-left: 1px solid #bfc1c3;
{'fraction_non_alphanumeric': 0.1522145144076841, 'fraction_numerical': 0.013340448239060833, 'mean_word_length': 3.144278606965174, 'pattern_counts': {'":': 0, '<': 95, '<?xml version=': 0, '>': 95, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3004410', 'n_tokens_mistral': 2747, 'n_tokens_neox': 2649, 'n_words': 617}