@use '../common/colours';
@use '../common/responsive';
@use '../common/accessibility';
@use '../common/layout';

.siteHeader {
  background-color: colours.$off-black;
  color: colours.$white;
  display: block;
  z-index: layout.$header-footer-index;
}

.inner {
  align-items: center;
  display: flex;
  max-width: layout.$max-page-width;
  padding: 0;

  @include responsive.respond-to(tablet, desktop) {
    margin: 0 auto;
    padding: 0 2em;
  }
}

.hide {
  display: none;
}

.logo {
  display: none;

  @include responsive.respond-to(tablet, desktop) {
    display: block;
    height: 55px;
    margin-right: 1em;
    width: 55px;
  }
}

.nav {
  width: 100%;

  @include responsive.respond-to(very-small) {
    overflow: scroll;
  }
}

.menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    display: inline-block;
    flex-grow: 1;
  }

  @include responsive.respond-to(tablet, desktop) {
    display: block;
  }
}

.menuTitle {
  background-color: inherit;
  color: inherit;
  display: inline;
}

%menu-item {
  align-items: center;
  color: colours.$white;
  display: flex;
  height: 65px;
  justify-content: center;
  padding: 1em;
  text-decoration: none;
  width: 100%;

  &:visited {
    color: colours.$white;
  }

  &:not(.active) {
    @include accessibility.interactive(
      $color: colours.$white,
      $background-color: colours.$off-black,
      $border-color: transparent
    ) {
      outline-offset: -#{layout.$outline-size};
    }
  }
}

.menuItem {
  @extend %menu-item;
}

.helpButton {
  @extend %menu-item;

  background-color: transparent;
  border: none;
  text-align: left;
}

.active {
  background-color: colours.$white;
  color: colours.$off-black;

  &:visited {
    color: colours.$off-black;
  }

  &:hover,
  &:focus {
    background-color: colours.$white;
    color: colours.$off-black;
    outline-offset: -#{layout.$outline-size};
  }
}
