@import "settings.global";

@mixin nav--color($background-color: $nav-background-color, $color: $nav-color) {
  color: $color;
  background-color: $background-color;
}

@mixin nav {
  padding: $nav-padding;
  margin: $nav-margin;
  width: $nav-width;
  z-index: $nav-z-index;
  @include nav--color;
}

@mixin nav__item--color($background-color: $nav-item-hover-background-color, $hover-color: $nav-item-hover-color) {
  &:not(:disabled) {
    &:hover {
      background-color: $background-color;
      color: $hover-color;
    }

    &:focus {
      box-shadow: $box-shadow-focus;
    }

    &:active {
      background-color: darken($background-color, $color-tint);
      color: $hover-color;
    }
  }
}

@mixin nav__item--active($background-color: $nav-item-active-background-color, $hover-color: $nav-item-active-color) {
  background-color: $background-color;
  color: $hover-color;
}

@mixin nav__item {
  display: block;
  padding: $nav-item-padding;
  color: inherit;
  letter-spacing: $nav-item-letter-spacing;
  cursor: pointer;
  text-decoration: none;
  @include nav__item--color;
}

@mixin nav__content {
  display: block;
  padding: $nav-item-padding;
  color: inherit;
}

@mixin nav--light {
  @include nav--color($nav-light-background-color, $nav-light-color);
}

@mixin nav--inline__item {
  display: inline-block;
}

@mixin nav__item--primary {
  @include nav__item--color($nav-item-primary-hover-background-color, $nav-item-primary-hover-color);
}
@mixin nav__item--active-primary {
  @include nav__item--active($nav-item-primary-active-background-color, $nav-item-primary-active-color);
}

@mixin nav__item--secondary {
  @include nav__item--color($color-secondary);
}
@mixin nav__item--active-secondary {
  @include nav__item--active($nav-item-secondary-active-background-color, $nav-item-secondary-active-color);
}

@mixin nav__item--success {
  @include nav__item--color($color-success);
}
@mixin nav__item--active-success {
  @include nav__item--active($nav-item-success-active-background-color, $nav-item-success-active-color);
}

@mixin nav__item--error {
  @include nav__item--color($color-error);
}
@mixin nav__item--active-error {
  @include nav__item--active($nav-item-error-active-background-color, $nav-item-error-active-color);
}

@mixin nav__item--right {
  float: right;
}

@mixin nav--top {
  position: absolute;
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
}

@mixin nav--bottom {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
}

@mixin nav--left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
}

@mixin nav--right {
  position: absolute;
  top: 0;
  bottom: 0;
  left: auto;
  right: 0;
}

@mixin nav--top {
  position: absolute;
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
}

@mixin nav--bottom {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
}

@mixin nav--left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
}

@mixin nav--fixed {
  position: fixed;
}

@mixin nav--high {
  box-shadow: $box-shadow-solid-high;
}

@mixin nav--higher {
  box-shadow: $box-shadow-solid-higher;
}

@mixin nav--highest {
  box-shadow: $box-shadow-solid-highest;
}