/// A horizontal navigation, used in header.
///
/// @group navigation
///
/// @example scss - usage
///
///   @include k-HorizontalNav;
///
/// @example html
///
///   <ul class="k-HorizontalNav" role="menubar">
///     <li class="k-HorizontalNav__element" role="menuitem">
///       <a class="k-HorizontalNav__item" href="#">
///         Nav link 1
///       </a>
///     </li>
///     <li class="k-HorizontalNav__element k-HorizontalNav__element--fixedSize"
///         role="menuitem">
///       <a class="k-HorizontalNav__item is-selected" href="#">
///         Nav link 2 (selected)
///       </a>
///     </li>
///   </ul>

@mixin k-HorizontalNav {
  // Font
  $font: 'regular';
  $font-step: -1; // 14px
  $line-height: normal;

  // Colors
  $base-color: map-get($k-colors, 'font-1');

  // Hover
  $hover-color: map-get($k-colors, 'primary-1');

  // Focus
  $focus-color: map-get($k-colors, 'primary-1');

  // State 'is-selected'
  $is-selected-color: map-get($k-colors, 'primary-1');

  $border-width: k-px-to-rem(4px);
  $margin: k-px-to-rem(25px);

  $transition-speed: .2s;

  .k-HorizontalNav {
    display: flex;
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%;
  }

  .k-HorizontalNav--center {
    justify-content: center;
  }

  .k-HorizontalNav__element {
    -ms-overflow-x: hidden;
  }

  .k-HorizontalNav__badge {
    margin-left: k-px-to-rem(5px);
  }

  .k-HorizontalNav__element--fixedSize {
    flex-shrink: 0;
  }

  .k-HorizontalNav__item {
    display: flex;
    align-items: center;

    margin: 0 $margin;
    border-bottom: $border-width solid transparent;

    @include k-typographyFont($font);
    @include k-typographyFontSize(
      $font-step,
      $line-height: $line-height
    );

    color: $base-color;
    text-align: center;
    text-decoration: none;

    cursor: pointer;
    transition: color $transition-speed, border-color $transition-speed;

    @include k-media-within('m') {
      padding: 0 k-px-to-rem(10px);
    }

    @include k-media-max('s') {
      margin: 0 k-px-to-rem(12px);
    }

    &:hover {
      color: $hover-color;
      text-decoration: none;
    }

    &:active {
      border-color: $focus-color;
      color: $focus-color;
    }

    &.is-selected {
      border-color: $is-selected-color;
      color: $is-selected-color;
    }

    &:focus {
      color: $hover-color;
      text-decoration: none;

      outline: 0;
      box-shadow: 0 0 k-px-to-rem(16px) $hover-color;
    }
  }
}