.nav {
  &--panel {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 9999;

    &.m-primary {
      .nav__action--1 {
        &:hover,
        &.active {
          color: color('font-primary');
        }
      }
    }

    .nav__actions {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100vw, 1fr));
      grid-gap: 2rem;

      .nav-action--1 {
        font-weight: bold;
      }
    }

    .nav__close-cta {
      position: absolute;
      right: 1rem;
      top: 1rem;
      @include size(5%);
      color: currentColor;
    }
  }

  &--bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    @include size(100%);

    .nav__action--1 {
      border-bottom: 3px solid transparent;

      &:hover,
      &.active {
        border-bottom: 3px solid currentColor;
      }
    }

    &.m-primary {
      .nav__action--1 {
        &:hover,
        &.active {
          color: color('font-primary');
        }
      }

      .nav__action--2 {
        &:hover,
        &.active {
          background-color: color('primary-dark');
        }
      }
    }

    &.m-primary--reverse {
      .nav__action--1 {
        &:hover,
        &.active {
          color: color('primary');
        }
      }

      .nav__action--2 {
        &:hover,
        &.active {
          background-color: color('primary');
          color: color('font-primary');
        }
      }
    }

    &--primary--reverse {
      .nav__action--1 {
        &:hover,
        &.active {
          color: color('primary');
        }
      }

      .nav__action--2 {
        &:hover,
        &.active {
          background-color: color('primary');
          color: color('font-primary');
        }
      }
    }

    &--vertical {
      flex-direction: column;

      .nav__actions {
        flex-direction: column;
      }
    }

    .nav__actions {
      align-self: stretch;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .nav__action {
      cursor: pointer;
      height: 100%;
      display: flex;
      align-items: center;
      border-color: currentColor;
    }

    .nav__search {
      flex: 0 0 40%;

      @include flex-center;
    }

    .nav__logo {
      flex: 0 0 15%;

      @include respond-to('tiny') {
        flex: 0 0 10%;
      }

      @include respond-to('medium') {
        flex: 0 0 7%;
      }
    }

    .nav__show-cta {
      flex: 0 0 15%;

      @include respond-to('tiny') {
        flex: 0 0 10%;
      }

      @include respond-to('medium') {
        flex: 0 0 5%;
      }
    }
  }
}