/// TooltipNew
///
/// @group tooltips
///
/// @example scss - Usage
///
///   @include k-TooltipNew;
///
/// @example html
///
///   <div class="k-TooltipNew">
///     <span class="k-TooltipNew__arrow" />
///     Lorem ipsum…
///   </div>

@mixin k-TooltipNew {
  // Colors helium
  $color-helium: map-get($k-colors, 'background-1');
  $border-color-helium: map-get($k-colors, 'primary-1');
  $background-color-helium: map-get($k-colors, 'primary-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-TooltipNew {
    @include k-typographyFont($font);
    @include k-typographyFontSize(
      $font-size,
      $line-height
    );

    position: absolute;
    padding-right: $tooltip-padding;
    padding-left: $tooltip-padding;

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

    @include k-media-min('s') {
      width: k-px-to-rem(280px);
    }
  }

  .k-TooltipNew__arrow {
    position: absolute;
    display: block;

    // Example
    left: 8rem;
    bottom: -1rem;
    width: 0;
    height: 0;

    border: $arrow-size solid transparent;
    border-top-color: $border-color-helium;
  }
}