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

@include tools.layer('components')
  // 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

    > .v-input__prepend
      margin-inline-end: max(0px, calc($input-affix-margin-inside - $slider-horizontal-start))

    > .v-input__append
      margin-inline-start: max(0px, calc($input-affix-margin-inside - $slider-horizontal-end))

    > .v-input__control
      margin-inline: $slider-horizontal-start $slider-horizontal-end
      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