/// A tab bar navigation, used in mobile and tablet versions.
///
/// Available options:
///   - `z-index`
///
/// @group navigation
///
/// @parameter {Map} $options - Tabbar options
///
/// @example scss - usage
///
///   @include k-TabBar((z-index: 50));
///
/// @example html
///
///   <div class="k-TabBar k-TabBar--responsive is-fixed">
///     <nav class="k-TabBar__nav">
///       <ul class="k-TabBar__list">
///         <li>
///           <a class="k-TabBar__item is-selected" href="#">
///             Link selected
///           </a>
///         </li>
///         <li>
///           <a class="k-TabBar__item" href="#">
///             Link
///           </a>
///         </li>
///         …
///       </ul>
///     </nav>
///   </div>

@mixin k-TabBar($options) {
  // Fonts.
  $font: 'regular';
  $font-step: -2; // 12px
  $line-height: 1.5;

  // Colors.
  $color: map-get($k-colors, 'primary-5');
  $current-color: map-get($k-colors, 'background-1');
  $background-color: map-get($k-colors, 'primary-1');
  $border-color: map-get($k-colors, 'primary-4');

  // Size.
  $round-size: k-px-to-rem(25px);
  $border-width: k-px-to-rem(1px);
  $current-border-width: k-px-to-rem(2px);
  $gutter: k-px-to-rem(10px);

  .k-TabBar__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 $border-width 0 rgba($current-color, .1);

    list-style-type: none;
    width: 100%;
    margin: 0;
    padding: 0;
    background: $background-color;

    .k-TabBar.is-fixed & {
      position: fixed;
      left: 0;
      bottom: 0;

      @if map-has-key($options, 'z-index') {
        z-index: k-number-definition(map-get($options, 'z-index'));
      }
    }
  }

  .k-TabBar__list {
    display: flex;
    align-items: center;
    justify-content: space-around;

    margin: 0;
    padding: 0;
    width: k-px-to-rem(375px);

    list-style-type: none;
  }

  .k-TabBar__item {
    height: k-px-to-rem(50px);
    padding-left: $gutter;
    padding-right: $gutter;

    @include k-typographyFont($font);
    @include k-typographyFontSize($font-step, $line-height);
    letter-spacing: k-px-to-rem(0.8px);
    text-decoration: none;
    text-align: center;

    display: flex;
    justify-content: center;
    flex-direction: column;
    position: relative;
    outline: none;
    border-top: $current-border-width solid transparent;
    cursor: pointer;
    color: $color;
    transition: color .2s, border-color .2s;

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

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

  .k-TabBar--responsive {
    display: flex;

    &.is-fixed {
      // approximate size of the final element so that it doesn't hide
      // the last elements on the page
      min-height: k-px-to-rem(50px);
    }

    @include k-media-min('m') {
      display: none;
    }
  }

  .k-TabBar--responsive--hidden\@m-down {
    @include k-media-max('m') {
      display: flex;
    }
  }
}