@import 'control-base';

$nav-font-size: $ec-font-size-action;
$nav-item-bg: $ec-color-bg-content;
$nav-item-height: rem-calc(28px);
$nav-item-line-height: rem-calc(18px);
$nav-item-bg-hover: #BFE0E9;
$nav-item-bg-selected: #D9EDF2;
$nav-icon-height: $ec-font-size-icon;
$nav-item-transition-duration: .5s;

@mixin nav-hover($selector) {
  @if $selector == button {

  } @else {
    background-color: $nav-item-bg-hover;
  }
}

@mixin nav-active() {
  background-color: $control-bg-active;
  color: $control-text-active;
}

@mixin nav-selected() {
  background-color: $nav-item-bg-selected;
}

@mixin nav-focus($borders) {
  @include control-focus($borders);
}

@mixin nav-item-states($selector, $borders: false) {
  cursor: pointer;
  transition: background-color $nav-item-transition-duration ease, box-shadow .3s ease, border-color .3s ease, color .3s ease;

  &.is-selected,
  &.is-highlighted {
    @include nav-selected();
  }

  &:hover {
    @include nav-hover($selector);
  }

  &:focus {
    @include nav-focus($borders);
    outline: none;
  }

  &:active {
    @include nav-active();
  }

  &:disabled,
  &.is-disabled {
    @include control-disabled('nav', $borders);
    cursor: default;
  }
}

@mixin nav-item(
  $selector,
  $bg: $nav-item-bg,
  $font-size: $nav-font-size,
  $height: $nav-item-height,
  $line-height: $nav-item-line-height,
  $borders: false
) {

  @include control-dimensions($font-size, $height, $line-height, $borders);

  align-items: center;
  background-color: $bg;
  display: flex;

  @include nav-item-states($selector, $borders);

  .label {
    align-items: center;
    display: flex;
    flex: auto;
  }

  ec-icon {
    flex: 0 0 auto;

    & + .label {
      margin: 0 rem-calc(6);
    }
  }
}

@mixin nav-group($font-size: $nav-font-size, $color: $control-color) {
  color: $color;
  font-size: $font-size;
  font-family: $control-font-family;
  padding: 0;
  margin: 0;
}
