@use "../../vendor/govuk-frontend" as *;

/* ==========================================================================
   #SIDE NAVIGATION
   ========================================================================== */

.moj-side-navigation {
  @include govuk-font(16);

  @include govuk-media-query($until: tablet) {
    display: flex;
    overflow-x: scroll;
  }

  @include govuk-media-query($from: tablet) {
    display: block;
    padding: govuk-spacing(4) 0 0;
  }
}

.moj-side-navigation__title {
  margin: 0;
  padding: govuk-spacing(2);
  padding-left: govuk-spacing(2) + 4px;
  color: govuk-colour("black", $variant: "tint-25");
  font-weight: normal;
  @include govuk-font($size: 19);

  @include govuk-media-query($until: tablet) {
    display: none;
  }
}

.moj-side-navigation__list {
  margin: 0;
  padding: 0;
  list-style: none;

  @include govuk-media-query($until: tablet) {
    display: flex;
    margin: 0;
    white-space: nowrap;
  }

  @include govuk-media-query($from: tablet) {
    margin-bottom: govuk-spacing(4);
  }
}

.moj-side-navigation__item {
  @include govuk-media-query($until: tablet) {
    display: flex;
  }

  a,
  a:link,
  a:visited {
    display: block;
    color: govuk-functional-colour(link);
    background-color: inherit;
    text-decoration: none;

    @include govuk-media-query($until: tablet) {
      padding: govuk-spacing(3);
      padding-bottom: govuk-spacing(3) - 4px; // Compensate for 4px border
      border-bottom: 4px solid transparent;
    }

    @include govuk-media-query($from: tablet) {
      padding: govuk-spacing(2);
      border-left: 4px solid transparent;
      background-color: inherit;
    }
  }

  a:hover {
    color: govuk-functional-colour(link-hover);
  }

  a:focus {
    position: relative;
    border-color: govuk-functional-colour(focus-text);
    color: govuk-functional-colour(focus-text);
    background-color: govuk-functional-colour(focus);
  }
}

.moj-side-navigation__item--active {
  a:link,
  a:visited {
    border-color: govuk-functional-colour(link);
    color: govuk-functional-colour(link);
    font-weight: bold;
  }

  a:hover {
    border-color: govuk-functional-colour(link-hover);
    color: govuk-functional-colour(link-hover);
  }

  a:focus {
    border-color: govuk-functional-colour(focus-text);
    color: govuk-functional-colour(focus-text);
    background-color: govuk-functional-colour(focus);
  }

  @include govuk-media-query($from: tablet) {
    a:link,
    a:visited {
      background-color: govuk-colour("black", $variant: "tint-95");
    }

    a:focus {
      color: govuk-functional-colour(focus-text);
      background-color: govuk-functional-colour(focus);
    }
  }
}

/*# sourceMappingURL=_side-navigation.scss.map */