.header {
  background-image: bg-v();

  @include mq($from: desktop) {
    background-image: bg-h();
  }
}

.nav__checkbox {
  left: -9999px;
  position: absolute;
}

.nav__toggle {
  @include tra;
  background-image: linear-gradient(to bottom, $color-alpha 20%, transparent 20%, transparent 40%, $color-alpha 40%, $color-alpha 60%, transparent 60%, transparent 80%, $color-alpha 80%);
  border-radius: rem(5px);
  cursor: pointer;
  display: block;
  height: rem(30px);
  position: absolute;
  right: rem(20px);
  text-indent: -9999px;
  top: rem(35px);
  width: rem(30px);
  z-index: 1;

  @include mq($from: desktop) {
    display: none;
  }

  .nav__checkbox:checked + & {
    background-image: linear-gradient(45deg, transparent 40%, $color-alpha 40%, $color-alpha 60%, transparent 60%), linear-gradient(-45deg, transparent 40%, $color-alpha 40%, $color-alpha 60%, transparent 60%);
  }
}

.nav__list {
  @include zero-box;
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;

  @include mq($from: desktop) {
    align-items: stretch;
    flex-direction: row;
  }
}

.nav__item {
  @include tra;
  align-items: stretch;
  display: flex;
  flex: 0 0 auto;
  font-size: ms(-4);

  @include mq($until: desktop) {
    width: 100%;

    &:not(:nth-child(1)) {
      display: none;

      .nav__checkbox:checked ~ .nav__list & {
        display: flex;
      }
    }
  }

  &:hover {
    background-color: transparentize($color-beta, 0.85);
  }

  .nav__list--2 & {
    @include mq($from: desktop) {
      max-width: calc(100% / 3);
      min-width: rem(120px);

      &:nth-child(-n + 2) {
        order: 0;
      }

      &:nth-child(n + 3) {
        order: 2;
      }
    }
  }

  .nav__list--4 & {
    @include mq($from: desktop) {
      max-width: rem(120px);
      width: calc(100% / 5);

      &:nth-child(-n + 3) {
        order: 0;
      }

      &:nth-child(n + 4) {
        order: 2;
      }
    }
  }

  .nav__list--6 & {
    font-size: ms(-6);

    @include mq($from: desktop) {
      max-width: rem(100px);
      width: calc(100% / 7);

      &:nth-child(-n + 4) {
        order: 0;
      }

      &:nth-child(n + 5) {
        order: 2;
      }
    }
  }

  .nav__list--8 & {
    font-size: ms(-8);

    @include mq($from: desktop) {
      max-width: rem(100px);
      width: calc(100% / 9);

      &:nth-child(-n + 5) {
        order: 0;
      }

      &:nth-child(n + 6) {
        order: 2;
      }
    }
  }

  [class*="nav__list--"] & {
    &:nth-child(1) {
      min-height: rem(100px);

      @include mq($from: desktop) {
        order: 1;
      }
    }
  }
}

.nav__link {
  @include tsh;
  @include ls(100);
  align-items: center;
  color: $color-beta;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  padding: rem(15px) rem(5px);
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;

  svg {
    background-color: $color-beta;
    border: rem(10px) solid $color-beta;
    border-radius: rem(35px);
    display: block;
    height: rem(50px);
    width: rem(50px);
  }
}