/// Static Tooltip
///
/// @group tooltips
///
/// @example scss - Usage
///
///   @include k-StaticTooltip;
///
/// @example html
///
///   <div class="k-StaticTooltip">
///     <div class="k-StaticTooltip__content">
///       <span class="k-StaticTooltip__arrow" />
///       Lorem ipsum...
///     </div>
///   </div>

@mixin k-StaticTooltip {
  $color: map-get($k-colors, 'primary-1');
  $border-color: map-get($k-colors, 'line-1');
  $background-color: map-get($k-colors, 'background-1');

  $font: 'regular';
  $font-size: -1; // 14px
  $line-height: 1.25;

  $border-size: k-px-to-rem(2px);

  $arrow-size: k-px-to-rem(8px);

  $tooltip-padding: k-px-to-rem(20px) - $border-size;

  .k-StaticTooltip {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    margin-top: k-px-to-rem(10px);
    text-align: left;
  }

  .k-StaticTooltip__content {
    @include k-typographyFont($font);
    @include k-typographyFontSize(
      $font-size,
      $line-height
    );

    padding: $tooltip-padding;
    margin-top: $arrow-size;
    position: relative;

    background-color: $background-color;
    border: $border-size solid $border-color;
    color: $color;
  }

  .k-StaticTooltip__arrow {
    position: absolute;
    left: 8rem;
    display: block;
    width: 0;
    height: 0;
    border: $arrow-size solid transparent;
    border-bottom-color: $border-color;
    top: -1rem;

    &::before {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      margin-left: -$arrow-size;
      margin-top: .2rem;
      border: $arrow-size solid transparent;
      border-bottom-color: white;
      top: -.5rem;
    }
  }
}