.euiRangeHighlight {
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(50% - #{($euiRangeHighlightHeight / 2)});
  overflow: hidden;

  &__progress {
    height: $euiRangeHighlightHeight;
    border-radius: $euiRangeHighlightHeight;
    background-color: $euiRangeTrackColor;

    &--hasFocus {
      background-color: $euiColorPrimary;
    }
  }

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

  &--hasTicks.euiRangeHighlight--compressed {
    top: ($euiFormControlCompressedHeight / 4) - ($euiRangeHighlightHeight / 2);
  }
}