/// A user menu.
///
/// @group navigation
///
/// @parameter {Map} $menu - a menu specification
///
/// @example scss - usage
///
///   @include k-UserMenu;
///
/// @example html
///
///   <ul class="k-UserMenu">
///     <li>
///       <a class="k-UserMenu__item" href="#">
///         Item
///       </a>
///     </li>
///     <li>
///       <a class="k-UserMenu__item k-UserMenu__borderTop" href="#">
///         Item
///       </a>
///     </li>
///     …
///   </ul>

@mixin k-UserMenu {
  $font: 'regular';
  $font-step: -2; // 12px

  $color: map-get($k-colors, 'font-1');
  $background-color: map-get($k-colors, 'background-2');
  $border-color: map-get($k-colors, 'line-1');
  $background-color-hover: map-get($k-colors, 'line-1');
  $color-active: map-get($k-colors, 'primary-1');
  $border-color-active: map-get($k-colors, 'primary-1');

  $secondary-color: map-get($k-colors, 'font-2');
  $secondary-background-color: map-get($k-colors, 'background-2');
  $secondary-border-color: map-get($k-colors, 'line-1');

  $arrow-size: k-px-to-rem(9px);
  $border-size: k-px-to-rem(1px);

  .k-UserMenu {
    position: relative;
    width: 100%;

    margin: 0;
    padding: 0;

    border: $border-size solid $border-color;
    border-left: none;
    list-style-type: none;

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

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

  .k-UserMenu__arrow {
    @include k-media-min('xs') {
      @include k-dropdownArrow((without-border-top: true));
    }
  }

  .k-UserMenu__item {
    display: block;
    padding: k-px-to-rem(15px) k-px-to-rem(20px);

    outline: none;
    border-left: $border-size solid $border-color;
    background-color: $background-color;

    @include k-typographyFont($font);
    @include k-typographyFontSize($font-step, 1);
    text-decoration: none;
    color: $color;

    transition: $color .2s, $background-color .2s, $border-color .2s;

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

    &:focus {
      background-color: $background-color-hover;
      border-left-color: $border-color-active;
      color: $color-active;
      text-decoration: none;
    }

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

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

  .k-UserMenu__item--secondary {
    border-left-color: $secondary-border-color;
    background-color: $secondary-background-color;
    color: $secondary-color;
  }

  // Manage items border.
  @each $position in (Top Bottom) {
    .k-UserMenu__border#{$position} {
      border-#{to_lower_case($position)}: $border-size solid $border-color;
    }
  }
}