@import "../themes";
@import "variables";


@mixin generate-navbar-item($themes: $themes) {
  @each $theme, $map in $themes {
    $navbar-item: map-get($map, navbar-item);
    :host-context(.#{$theme}-theme) .navbar-item {
      color: map-get($navbar-item, color);

      &.top {
          @include generate-slide-effect('top', map-get($navbar-item, active-color))
      }

      &.bottom {
          @include generate-slide-effect('bottom', map-get($navbar-item, active-color))
      }

    }
  }
  :host-context(.small-nav) .navbar-item {
    padding-left: 18px;
    padding-right: 18px;

    &:hover, &.active {
      &:after {
        height: 3px !important;
      }
    }
  }
}

@mixin generate-navbar-item-active($direction, $active-color) {
  color: $active-color;
  @if $direction == 'top' {
    border-top: solid 6px $active-color;
    padding-top: 16px;
  } @else {
    border-bottom: solid 6px $active-color;
    padding-bottom: 16px;
    :host-context(.small-nav) {
      .navbar-item {
        font-size: 12px;
        padding: 11px 18px;
        &.active.bottom {
          border-bottom: solid 3px;
          padding-bottom: 8px;
        }
      }
    }
  }
}

@mixin generate-slide-effect($direction, $active-color) {
  position: relative;
  &:hover, &.active {
    color: $active-color;

    &:after {
      content: "";
      height: 6px;
      width: 100%;
      background: $active-color;
      position: absolute;
      #{$direction}: 0;
    }
  }

}
