/*!
 * 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.
 */

@mixin tickStyles {
  @include size($ouiSizeXS);

  background-color: $ouiColorDarkShade;
  border-radius: 100%;
  position: absolute;
  top: 0;
}

.ouiRangeTicks {
  position: absolute;
  left: 0;
  right: 0;
  top: $ouiSizeS;
  display: flex;

  &--isCustom {
    left: calc($ouiRangeThumbWidth / 8);
    right: calc($ouiRangeThumbWidth / 8);
  }
}

.ouiRangeTick {
  overflow-x: hidden;
  text-overflow: ellipsis;
  font-size: $ouiFontSizeXS;
  position: absolute;
  transform: translateX(-50%);
  padding-top: $ouiSize;

  &:not(.ouiRangeTick--hasTickMark)::before {
    @include tickStyles;
    content: '';
    left: calc(50% - #{calc($ouiSizeXS/2)});
  }

  .ouiRangeTick__pseudo {
    @include tickStyles;
  }

  &--isCustom {
    overflow-x: visible;
  }

  &--isMin,
  &--isMax {
    transform: translateX(0);
  }

  &--isMin {
    .ouiRangeTick__pseudo {
      left: 0;
    }
  }

  &--isMax {
    .ouiRangeTick__pseudo {
      right: 0;
    }
  }

  &:enabled:hover,
  &:focus,
  &--selected {
    color: $ouiColorPrimary;
  }

  &--selected {
    font-weight: $ouiFontWeightMedium;
  }

  &:disabled {
    cursor: not-allowed;
  }
}

.ouiRangeTicks--compressed {
  top: $ouiSizeS - 2px;

  .ouiRangeTick {
    padding-top: $ouiSize - 2px;
  }
}

.ouiRangeTick__label {
  pointer-events: none;
}