.euiRangeTooltip {
  // Keeps tooltip (value) aligned to percentage of actual slider
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(100% - #{$euiRangeThumbWidth});
  margin-left: $euiRangeThumbWidth / 2;
  pointer-events: none;
}

.euiRangeTooltip__value {
  // Indentation for legibility in transition
  // sass-lint:disable-block indentation
  @include euiFontSizeS;
  border: 1px solid $euiTooltipBackgroundColor;
  position: absolute;
  border-radius: $euiBorderRadius;
  padding: ($euiSizeXS / 2) $euiSizeS;
  background-color: $euiTooltipBackgroundColor;
  color: $euiColorGhost;
  max-width: 256px;
  top: 50%;
  transition:
    box-shadow $euiAnimSpeedNormal $euiAnimSlightResistance,
    transform $euiAnimSpeedNormal $euiAnimSlightResistance;

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

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

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

  // Positions the arrow
  &.euiRangeTooltip__value--right {
    margin-left: $euiSizeL;

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

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

  &.euiRangeTooltip__value--left {
    margin-right: $euiSizeL;

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

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

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

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

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

    .euiRangeTooltip--compressed & {
      top: ($euiFormControlCompressedHeight / 4);
    }
  }
}