/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

.ouiRangeTooltip {
  // Keeps tooltip (value) aligned to percentage of actual slider
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(100% - #{$ouiRangeThumbWidth});
  margin-left: $ouiRangeThumbWidth / 2;
  pointer-events: none;
  z-index: 2; // higher than .ouiRangeSlider that is 1
}

.ouiRangeTooltip__value {
  // Indentation for legibility in transition
  // sass-lint:disable-block indentation
  @include ouiFontSizeS;
  border: 1px solid $ouiTooltipBackgroundColor;
  position: absolute;
  border-radius: $ouiBorderRadius;
  padding: ($ouiSizeXS / 2) $ouiSizeS;
  background-color: $ouiTooltipBackgroundColor;
  color: $ouiColorGhost;
  max-width: 256px;
  top: 50%;
  transition:
    box-shadow $ouiAnimSpeedNormal $ouiAnimSlightResistance,
    transform $ouiAnimSpeedNormal $ouiAnimSlightResistance;

  // Custom sizing
  $arrowSize: $ouiSizeM;
  $arrowMinusSize: (($arrowSize / 2) - 1px) * -1;

  &::after,
  &::before {
    content: '';
    position: absolute;
    bottom: -$arrowSize / 2;
    left: 50%;
    transform-origin: center;
    background-color: $ouiTooltipBackgroundColor;
    width: $arrowSize;
    height: $arrowSize;
    border-radius: 2px;
  }

  &::before {
    background-color: $ouiTooltipBackgroundColor;
  }

  // Positions the arrow
  &.ouiRangeTooltip__value--right {
    margin-left: $ouiSizeL;

    &:before,
    &:after {
      left: $arrowMinusSize;
    }

    &::before {
      margin-left: -1px;
    }
  }

  &.ouiRangeTooltip__value--left {
    margin-right: $ouiSizeL;

    &:before,
    &:after {
      left: auto;
      right: $arrowMinusSize;
    }

    &::before {
      margin-right: -1px;
    }
  }

  &.ouiRangeTooltip__value--right,
  &.ouiRangeTooltip__value--left {
    transform: translateX(0) translateY(-50%);

    &:before,
    &:after {
      bottom: 50%;
      transform: translateY(50%) rotateZ(45deg);
    }
  }

  &--hasTicks {
    top: ($ouiFormControlHeight / 4);

    .ouiRangeTooltip--compressed & {
      top: ($ouiFormControlCompressedHeight / 4);
    }
  }
}