@use 'sass:map'
@use 'sass:selector'
@use '../../styles/settings'
@use '../../styles/tools'
@use './variables' as *

// Block
.v-slider
  .v-slider__container
    input
      cursor: default
      padding: 0
      width: 100%
      display: none

  > .v-input__append,
  > .v-input__prepend
    padding: 0

// Elements
.v-slider__container
  position: relative
  min-height: inherit
  width: 100%
  height: 100%
  display: flex
  justify-content: center
  align-items: center
  cursor: pointer

  .v-input--disabled &
    opacity: var(--v-disabled-opacity)

  .v-input--error:not(.v-input--disabled) &
    color: rgb(var(--v-theme-error))

// Modifiers
.v-slider.v-input--horizontal
  align-items: center
  margin-inline: $slider-horizontal-start $slider-horizontal-end

  > .v-input__control
    min-height: $slider-horizontal-min-height
    display: flex
    align-items: center

.v-slider.v-input--vertical
  justify-content: center
  margin-top: $slider-vertical-margin-top
  margin-bottom: $slider-vertical-margin-bottom

  > .v-input__control
    min-height: $slider-vertical-min-height

.v-slider.v-input--disabled
  pointer-events: none

.v-slider--has-labels > .v-input__control
  margin-bottom: $slider-tick-label-margin-top * .5

.v-slider__label
  margin-inline-end: $slider-label-margin-end