@use '../../abstract';

.cds-slider {
  @include abstract.relative();
  padding-block: 6px;

  &__thumb,
  &__thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  &__thumb {
    @include abstract.absolute();

    width: 100%;
    pointer-events: none;
    height: 0;
    outline: none;
    z-index: 5;

    &::-webkit-slider-thumb {
      background-color: #fff;
      border: 2px solid var(--secondary-gray-blue-450);
      border-radius: 50%;
      box-shadow: var(--shadow-md);
      cursor: pointer;
      width: 20px;
      height: 20px;
      margin-block-start: 2px;
      pointer-events: all;
      position: relative;
    }
  }

  &__tack,
  &__range,
  &__left-value,
  &__right-value {
    @include abstract.absolute();
  }

  &__track,
  &__range {
    border-radius: 4px;
    height: 8px;
  }

  &__track {
    background-color: var(--gray-200);
    width: 100%;
  }

  &__range {
    background-color: var(--secondary-gray-blue-450);
    width: 100%;
  }

  &__inputs {
    margin-block-start: 22px;
  }
}