$nav-themes: _pick($ui-colors, (default, dark, dark-blue, normal, light, off-light));

@mixin navShadow($position: default) {
  @if $position == 'default' {
    box-shadow: 12px 0 10px -10px rgba(black, 0) inset, -12px 0 10px -10px rgba(black, 0) inset, 0 2px 1px -1px palette(gray, light);
  }

  @else if $position == 'start' {
    box-shadow: 12px 0 10px -10px rgba(black, 0.2) inset, -12px 0 10px -10px rgba(black, 0) inset, 0 2px 1px -1px palette(gray, light);
  }

  @else if $position == 'end' {
    box-shadow: 12px 0 10px -10px rgba(black, 0) inset, -12px 0 10px -10px rgba(black, 0.2) inset, 0 2px 1px -1px palette(gray, light);
  }

  @else if $position == 'both' {
    box-shadow: 12px 0 10px -10px rgba(black, 0.2) inset, -12px 0 10px -10px rgba(black, 0.2) inset, 0 2px 1px -1px palette(gray, light);
  }
}

.nav-bar {
  display: flex;

  .dropdown-menu__btn {
    border: none;
  }

  &--row {
    @include navShadow();

    .has-overflow-end {
      @include navShadow('end');
    }

    .has-overflow-start {
      @include navShadow('start');
    }

    .has-overflow-start.has-overflow-end {
      @include navShadow('both');
    }
  }

  @each $theme, $color in $nav-themes {
    &--#{$theme} {
      background: $color;

      &.nav-bar--column {
        border-top: 1px solid darken($color, 5%);
        border-bottom: 1px solid darken($color, 5%);

        .nav-bar__item + .nav-bar__item {
          border-top: 1px solid darken($color, 5%);
        }

        .active {
          background: darken($color, 5%);
          box-shadow: 5px 0 0 palette(blue) inset;
        }
      }

      &.nav-bar--row {
        .active {
          box-shadow: 0 -5px 0 palette(blue) inset;
        }
      }

      .nav-bar__link,
      .nav-bar__icon,
      .dropdown-menu__btn {
        @if ($theme == off-light) {
          color: palette(gray, dark);
          fill: palette(gray, dark);

          &.active {
            color: palette(blue);
            fill: palette(blue);
          }
        }

        @else if(lightness($color) > 60) {
          color: darken($color, 25%);
          fill: darken($color, 25%);
        }

        @else {
          color: $white;
          fill: $white;
        }
      }
    }
  }

  .container {
    padding: 0;
  }

  &__list {
    @include pop();

    display: flex;
    flex: 1 1 0%;
    margin: 0;
    overflow: auto;
    padding: 0;
    position: relative;
    justify-content: center;

    .nav-bar--row & {
      justify-content: flex-start;
      -ms-height: calc(2.75em * 2);
    }

    .nav-bar--column & {
      flex-direction: column;
    }
  }

  &__item {
    flex-direction: column;
    display: flex;
    list-style: none;
    position: relative;

    @include gmq(portable) {
      flex: 1 1 0%;
    }
  }

  &__link {
    @include pop();

    align-items: center;
    font-size: font-size(body, small);
    justify-content: center;
    opacity: 0.6;
    text-decoration: none;
    white-space: nowrap;

    /* remember to define focus styles! */
    &:focus {
      outline: 0;
    }

    .icon-position--column & {
      flex-direction: column;
    }

    .nav-bar--row & {
      font-weight: font-weight(medium);
      padding: 1em 2em;
      text-align: center;

      @include gmq(desk) {
        padding: 1.5em 2em;
      }
    }

    .nav-bar--column & {
      font-weight: font-weight(light);
      padding: 1.5em;
      justify-content: flex-start;
    }

    &.active,
    &:hover {
      opacity: 1;
    }
  }

  &__icon {
    .icon-position--column & {
      margin-bottom: 0.5em;
    }

    .icon-position--row & {
      margin-right: 0.5em;
    }
  }
}