@use "../theme.scss" as *;

.slider {
  width: 100%;
  position: relative;
  text-align: center;
  min-height: 2.5em;
  margin-bottom: $form-control-vertical-gap;
  cursor: pointer;

  &:focus-visible {
    outline: none;
  }

  &:active {
    outline: none;
  }

  & .slider-rail {
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    margin-top: 1em;
    height: 0.5em;
    width: 100%;
    background-color: $slider-rail-bg-color;

    & .slider-scale {
      position: absolute;
      width: 100%;
      height: 100%;
      margin: 0;
    }
  }

  & .slider-knob-container {
    box-sizing: border-box;
    position: absolute;
    width: 2.2em;
    height: 1.8em;
    padding-left: 0.4em;
    padding-right: 0.4em;
    margin-left: -0.9em;
    margin-top: -0.8em;

    &:hover {
      cursor: ew-resize;

      & .slider-knob {
        background-color: $slider-knob-bg-hover-color;
      }
    }

    & .slider-knob {
      background-color: $slider-knob-bg-color;
      border: 1px solid $slider-knob-border-color;
      border-radius: 0.2em;
      height: 100%;
    }
  }

  & .slider-scale {
    margin-top: 1em;

    & .slider-scale-point-mark {
      position: relative;
      height: 100%;
      width: 1px;
      background-color: $slider-scale-point-mark-bg-color;
    }

    & .slider-scale-point-label {
      width: 1em;
      top: 2em;
      font-size: 95%;
    }
  }

  &.focused {
    & .slider-knob-container {
      & .slider-knob {
        background-color: $slider-knob-bg-hover-color;
      }
    }
  }

  &.disabled {
    cursor: not-allowed;

    & .slider-knob-container {
      &:hover {
        cursor: not-allowed;

        & .slider-knob {
          background-color: $slider-rail-bg-color;
        }
      }

      & .slider-knob {
        background-color: $slider-rail-bg-color;
      }
    }
  }
}