.euiRangeLevels {
  display: flex;
  justify-content: stretch;
  position: absolute;
  left: 0;
  right: 0;
  top: ($euiFormControlHeight / 2) + 2px;

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

  &--compressed {
    top: ($euiFormControlCompressedHeight / 2) + 2px;

    &.euiRangeLevels--hasTicks {
      top: ($euiFormControlCompressedHeight / 4) + 2px;
    }
  }
}

.euiRangeLevel {
  display: block;
  height: 6px;
  border-radius: 6px;
  margin: 2px;
}

// Modifier naming and colors.
$euiRangeLevelColors: (
  primary: $euiColorPrimary,
  success: $euiColorSuccess,
  warning: $euiColorWarning,
  danger: $euiColorDanger,
);

// Create level modifiers based upon the map.
@each $name, $color in $euiRangeLevelColors {
  .euiRangeLevel--#{$name} {
    background-color: transparentize($color, .7);
  }
}