/// Apply an arrow display.
///
/// This mixin will apply an arrow styles.
///
/// @group dropdowns
///
/// @example scss - Usage
///   .k-UserMenu__arrow {
///     @include k-dropdownArrow((
///       size: 10px,
///       border-size: 1px,
///       background-color: #eee,
///       border-color: #333,
///       border-color-hover: #222,
///     ));
///   }
///
/// @example css - CSS output
///   .k-UserMenu__arrow {
///     …
///
///     &:after,
///     &:before {
///       …
///     }
///   }

@mixin k-dropdownArrow($arrow: ()) {
  $arrow-size: k-default(map-get($arrow, 'size'), 7px);
  $border-size: k-default(map-get($arrow, 'border-size'), 1px);
  $background-color: k-default(
    map-get($arrow, 'background-color'),
    map-get($k-colors, 'background-2')
  );
  $border-color: k-default(
    map-get($arrow, 'border-color'),
    map-get($k-colors, 'line-1')
  );
  $border-color-hover: k-default(
    map-get($arrow, 'border-color-hover'),
    map-get($k-colors, 'line-1')
  );
  $without-border-top: k-default(map-get($arrow, 'without-border-top'), false);

  position: absolute;

  @if $without-border-top {
    top: -($arrow-size);
  }
  @else {
    top: -($arrow-size - $border-size);
  }

  right: 50%;

  display: block;
  width: 0;
  height: $arrow-size;

  &:after,
  &:before {
    position: absolute;
    bottom: 0;
    left: 50%;
    content: " ";
    width: 0;
    height: 0;
    border: solid transparent;
    pointer-events: none;
  }

  &:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: $background-color;
    border-width: $arrow-size - $border-size;
    margin-left: -($arrow-size - $border-size);
  }

  &:before {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: $border-color;
    border-width: $arrow-size;
    margin-left: -($arrow-size);
  }

  &.is-hover:after {
    border-bottom-color: $border-color-hover;
  }
}