/// SliderTooltip
///
/// @group form
///
/// Tooltip that accompanies a Slider.
///
/// @example scss - usage
///
///   @include k-SliderTooltip((
///     colors: (
///       border: red,
///       border-inactive: darkgrey,
///       background: pink,
///       background-inactive: lightgrey,
///       text: red,
///       text-inactive: grey,
///     )
///   ));
///
/// @example html
///
///    <div class="k-SliderTooltip">
///      <div class="k-SliderTooltip__tip">
///        <div class="k-SliderTooltip__tip__content">
///          Drag me
///        </div>
///      </div>
///      <div class="k-SliderTooltip__arrow">
///        <div class="k-SliderTooltip__arrow__content"></div>
///      </div>
///    </div>
@mixin k-SliderTooltip($slider-tooltip) {
  @include k-with-module('k-SliderTooltip: $slider-tooltip') {
    $colors: k-map-fetch($slider-tooltip, 'colors');

    $border-color: k-color-definition(
      k-map-fetch($colors, 'border')
    );
    $border-inactive-color: k-color-definition(
      k-map-fetch($colors, 'border-inactive')
    );
    $background-color: k-color-definition(
      k-map-fetch($colors, 'background')
    );
    $background-inactive-color: k-color-definition(
      k-map-fetch($colors, 'background-inactive')
    );
    $text-color: k-color-definition(
      k-map-fetch($colors, 'text')
    );
    $text-inactive-color: k-color-definition(
      k-map-fetch($colors, 'text-inactive')
    );

    $border-width: 1px;
    $arrow-width: 5px; // should be in pixels to be able to substract the border
    $transition-speed: .2s;
    $handle-size: 2.5rem;
    $tooltip-width: 10rem;
    $tooltip-distance: .8rem;

    .k-SliderTooltip__tip {
      // Adjust padding so that "left: 100%" on the child contents fit tightly
      // in 100% of this container.
      padding-right: $tooltip-width;
    }

    .k-SliderTooltip__tip__content {
      position: relative; // so that JavaScript can set a percentage on "left"
      box-sizing: border-box;
      width: $tooltip-width;
      padding: .5rem;

      border: 1px solid $border-color;
      border-radius: 4px;
      background: $background-color;

      text-align: center;
      color: $text-color;
      @include k-typographyFontSize(-1, 1.3rem);

      transition: background $transition-speed,
                  color $transition-speed,
                  border-top-color $transition-speed;

      .k-SliderTooltip.is-inactive & {
        background: $background-inactive-color;
        color: $text-inactive-color;
        border-color: $border-inactive-color;
      }
    }

    .k-SliderTooltip__arrow {
      position: relative;

      // Adjust padding so that the arrow fits over the middle of the handle
      // just by setting "left" with a percentage on the content.
      padding-left: ($handle-size / 2);
      padding-right: ($handle-size / 2);
    }

    .k-SliderTooltip__arrow__content {
      position: relative; // so that JavaScript can set a percentage on "left"

      box-sizing: border-box;
      width: $arrow-width + $border-width * 2;
      height: $tooltip-distance;

      margin-top: -$border-width; // to go over the tooltip's bottom border
      margin-left: $border-width; // to center it correctly

      // CSS trick to create a bottom-facing arrow, using only borders on :after
      // and :before.

      &:after,
      &:before {
        position: absolute;

        width: 0;
        height: 0;

        border: solid transparent;
        content: " ";

        transition: border-top-color $transition-speed;
        pointer-events: none;
      }

      // Outside of the arrow
      //
      //   \ \  / / <----
      //    \ \/ /
      //     \  /
      //      \/
      &:before {
        border-top-color: $border-color;
        border-width: ($arrow-width + $border-width);
        margin-left: -($arrow-width + $border-width);

        .k-SliderTooltip.is-inactive & {
          border-top-color: $border-inactive-color;
        }
      }

      // Inside of the arrow
      //
      //   \ \  / <----
      //    \ \/ /
      //     \  /
      //      \/
      &:after {
        border-top-color: $background-color;
        border-width: ($arrow-width);
        margin-left: -($arrow-width);

        .k-SliderTooltip.is-inactive & {
          border-top-color: $background-color;
        }
      }
    }
  }
}