@import "~Breakpoints";
@import "~Colors";
@import "~FontSize";
@import "~Layout";
@import "~Type";
@import "~Zindex";

$navBreak: 'lg';
$smallNavHeight: 4rem;
$navHeight: 8rem;
$size: 1rem;
@function indicator() {
  @return translateY(-50%) translateX($size);
}

@mixin activeNest() {
  transform:  scale(1, 1) translateX(-50%);
  max-height: 100vh;
  opacity:    1;
}

@mixin gradientMaker($color: 'white', $direction:'top', $distance: 100%) {
  $gradient: transparentize($color, 1) 0%,
             transparentize($color, 1 - 0.019) .095 * $distance,
             transparentize($color, 1 - 0.07) .177 * $distance,
             transparentize($color, 1 - 0.138) .247 * $distance,
             transparentize($color, 1 - 0.212) .31 * $distance,
             transparentize($color, 1 - 0.291) .368 * $distance,
             transparentize($color, 1 - 0.373) .423 * $distance,
             transparentize($color, 1 - 0.455) .476 * $distance,
             transparentize($color, 1 - 0.538) .529 * $distance,
             transparentize($color, 1 - 0.62) .582 * $distance,
             transparentize($color, 1 - 0.701) .637 * $distance,
             transparentize($color, 1 - 0.781) .695 * $distance,
             transparentize($color, 1 - 0.857) .758 * $distance,
             transparentize($color, 1 - 0.925) .829 * $distance,
             transparentize($color, 1 - 0.978) .912 * $distance,
             $color $distance;
  background-image: linear-gradient(to $direction, $gradient);
}

.nav {
  position:         fixed;
  @include container-fluid();
  background-color: white;
  display:          flex;
  justify-content:  space-between;
  align-items:      center;
  margin:           0 auto;
  top:              0;
  left:             50%;
  width:            100vw;
  //padding-top: 1rem;
  //padding-bottom: 1rem;

  transform:        translateX(-50%);
  z-index:          $zindex-navbar-fixed;
}

.scrollNav {

}

@import 'styles/brand';

// main navigation list
@import 'styles/navlist';

// links inside each list item
@import 'styles/links';

// dropdown lists
@import 'styles/nests';

// nav list items
.navItem {
  //background-color: $gray-lightest;
  font-family:    $font-family-sans-serif;
  text-transform: uppercase;
  position:       relative;
  font-size:      1.2rem;
  font-weight:    300;
  flex-grow:      0;
  flex-wrap:      nowrap;
  letter-spacing: .2rem;
  padding:        0;

  display:        inline-block;
  vertical-align: middle;
  cursor:         pointer !important;

  &.active {
    .nestedNavList {
      transition: transform .5s ease, opacity .5s ease, max-height 0s linear;
      @include activeNest;
    }
    .nestLink:after {
      transform: indicator() rotate(-45deg);
    }
  }
  @include media-breakpoint-up($navBreak) {
    padding: 0;
    &:hover {
      .nestedNavList {
        transition: transform .5s ease, opacity .5s ease, max-height 0s linear;
        @include activeNest;
      }
      & > .nestLink:after {
        transform: indicator() rotate(-45deg);
      }

      & > .navLink, & > .nestLink {

        border-color: $brand-secondary;
      }

    }
  }
}

.navbarToggler {
  svg {
    stroke: $brand-primary;
    stroke-linecap: round;
  }
  background-color: transparent;
  position:         absolute;
  top:              50%;
  right:            0.5rem;
  width:            6.5rem;
  height:           5rem;
  transform:        translateY(-50%);
  border-radius:    50%;
  z-index:          $zindex-modal-bg;
  //padding: 1rem;
  border:           none;
  font-size:        1.5rem;
  text-transform:   uppercase;
  color:            $brand-primary;
  font-weight:      100;
  span {
    display:  block;
    position: relative;
    @include media-breakpoint-up($navBreak) {
      display: none;
    }
    &:after {
      content:             '';
      height:              1rem;
      width:               1rem;
      position:            absolute;
      left:                110%;
      top:                 30%;
      border-color:        white;
      border-width:        .2rem;
      border-bottom-style: solid;
      border-right-style:  solid;
      transform:           rotate(45deg) translateY(-50%);
    }
  }
  img {
    padding-left: 1rem;
  }
  @include media-breakpoint-up($navBreak) {
    display: none;
  }
}