@slider-handle-width: 2rem;
@slider-handle-height: 2rem;

@slider-track-height: .375rem;

.slider {
  // Numbers
  &__number-container {
    min-height: 2.5rem;
  }

  &__number,
  &__number-selection,
  &__number-model-answer {
    height: 2.5rem;
    width: 2.5rem;
    line-height: 2.5;
    text-align: center;
    border-radius: 50%;
  }

  &__widget:not(.is-disabled) &__number {
    cursor: pointer;
  }

  &__number-selection {
    background-color: @item-color;
    color: @item-color-inverted;
  }

  &__number-model-answer {
    background-color: @item-color;
    color: @item-color-inverted;
  }

  // Scale
  &__scale-container {
    background-color: lighten(@black, 75%);
  }

  &__scale-notch {
    background-color: lighten(@black, 75%);
  }

  // Slider bar
  &__item-input-track {
    background-color: darken(@background-inverted, 20%);
    border-radius: 10px;
    overflow: hidden;
  }

  &__item-input-fill {
    background-color: @item-color;
  }

  // Class to show whether the users selection is in/correct
  &__widget.show-user-answer.is-correct &__number-selection {
    background-color: @validation-success;
    color: @validation-success-inverted;
  }

  &__widget.show-user-answer.is-correct &__item-input-fill {
    background-color: @validation-success;
  }

  &__widget.show-user-answer.is-incorrect &__number-selection {
    background-color: @validation-error;
    color: @validation-error-inverted;
  }

  &__widget.show-user-answer.is-incorrect &__item-input-fill {
    background-color: @validation-error;
  }

  &__widget.show-correct-answer.is-correct &__item-input-fill,
  &__widget.show-correct-answer.is-incorrect &__item-input-fill {
    background-color: @validation-success;
  }

  &__widget.show-correct-answer.is-correct &__number-model-answer,
  &__widget.show-correct-answer.is-incorrect &__number-model-answer {
    background-color: @validation-success;
    color: @validation-success-inverted;
  }
}
