/// Tooltip
///
/// @group tooltips
///
/// @example scss - Usage
///
///   @include k-Tooltip;
///
/// @example html
///
///   <ReactTooltip
///     id="tooltip"
///     class="k-Tooltip"
///     role="tolltip"
///     effect="solid"
///     place="top"
///     globalEventOff="click">
///     …
///   </ReactTooltip>

@mixin k-Tooltip {
  // 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;

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

  // DEPRECATED
  $tooltip-margin: k-px-to-rem(18px);

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

  // To override __react_component_tooltip style.
  .k-Tooltip .k-Tooltip__content {
    @include k-typographyFont($font);
    @include k-typographyFontSize(
      $font-size,
      $line-height
    );
  }

  .k-Tooltip__content {
    background-color: $background-color-helium !important;
    color: $color-helium !important;
    opacity: 1 !important;

    padding: $tooltip-padding !important;

    max-width: k-px-to-rem(340px) !important;
    // ReactTooltip forces a default `border-radius: 3px`, we have to set it
    // to 0px.
    border-radius: 0 !important;

    &.place-top {
      margin-bottom: $tooltip-margin !important;

      &:after {
        border-top-color: $background-color-helium !important;
        border-top-style: solid !important;
        border-top-width: $arrow-size !important;
        margin-left: -($arrow-size) !important;
        bottom: k-px-to-rem(-8px) !important;
        left: 50.3% !important;
      }
    }

    &.place-right {
      margin-left: $tooltip-margin !important;

      &:after {
        border-right-color: $background-color-helium !important;
        border-right-style: solid !important;
        border-width: $arrow-size !important;
        margin-top: -($arrow-size) !important;
        left: k-px-to-rem(-8px) !important;
        top: 52% !important;
      }
    }

    &.place-bottom {
      margin-top: $tooltip-margin !important;

      &:after {
        border-bottom-color: $background-color-helium !important;
        border-bottom-style: solid !important;
        border-width: $arrow-size !important;
        margin-left: -($arrow-size) !important;
        top: k-px-to-rem(-8px) !important;
        left: 50.3% !important;
      }
    }

    &.place-left {
     margin-right: $tooltip-margin !important;

      &:after {
        border-left-color: $background-color-helium !important;
        border-left-style: solid !important;
        border-width: $arrow-size !important;
        margin-top: -($arrow-size) !important;
        right: k-px-to-rem(-8px) !important;
        top: 52% !important;
      }
    }
  }
}