/// A vertical navigation to platform switch.
///
/// @group navigation
///
/// @parameter {Map} $nav - a nav specification
///
/// @example scss - usage
///
///   @include k-PlatformSwitch((
///     background-color: #fbfbfb,
///     border-color: #eee,
///     background-color-hover: #f8f8f8,
///     border-color-hover: ##333,
///   ));
///
/// @example html
///
///   <ul class="k-PlatformSwitch">
///     <li>
///       <a class="k-PlatformSwitch__item" href="#">
///         <div class="k-PlatformSwitch__item__element">
///           …
///         </div>
///
///         <div class="k-PlatformSwitch__item__element
///                     k-PlatformSwitch__item__element--pull-end
///                     k-PlatformSwitch__item__element--animate">
///           …
///         </div>
///       </a>
///     </li>
///   </ul>

@mixin k-PlatformSwitch($nav) {
  @include k-with-module('k-PlatformSwitch') {

    $background-color: k-color-definition(
      k-map-fetch($nav, ('colors', 'background')));
    $border-color: k-color-definition(
      k-map-fetch($nav, ('colors', 'border')));
    $background-color-hover: k-color-definition(
      k-map-fetch($nav, ('colors', 'background-hover')));
    $border-color-active: k-color-definition(
      k-map-fetch($nav, ('colors', 'border-active')));

    .k-PlatformSwitch {
      display: block;
      min-width: k-px-to-rem(300px);
      margin: 0 auto;
      padding: 0;
      border-top: 1px solid $border-color;
      list-style: none;
    }

    .k-PlatformSwitch--withoutBorderTop {
      border-top: none;
    }

    .k-PlatformSwitch__item {
      margin: 0;
      padding: k-px-to-rem(10px) k-px-to-rem(10px);
      border: 1px solid $border-color;
      border-top: none;
      background: $background-color;
      transition: background-color .2s, border-color .2s;

      &:focus {
        background-color: $background-color-hover;
      }

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

      @include k-media-xs {
        border-left: none;
        border-right: none;
      }
    }
  }
}