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

// Theme
.v-slider-track__background
  background-color: rgb(var(--v-theme-surface-variant))

.v-slider-track__fill
  background-color: rgb(var(--v-theme-surface-variant))

.v-slider-track__tick
  background-color: rgb(var(--v-theme-surface-variant))

  &--filled
    background-color: $slider-tick-background

// Elements
.v-slider-track
  border-radius: $slider-track-border-radius

.v-slider-track
  &__background, &__fill
    position: absolute
    transition: $slider-transition
    border-radius: inherit

    .v-slider--pressed &
      transition: none

    .v-input--error:not(.v-input--disabled) &
      background-color: currentColor

.v-slider-track__ticks
  height: 100%
  width: 100%
  position: relative

.v-slider-track__tick
  position: absolute
  opacity: 0
  transition: 0.2s opacity settings.$standard-easing
  border-radius: $slider-tick-border-radius
  width: var(--v-slider-tick-size)
  height: var(--v-slider-tick-size)
  transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / -2))

  &--first .v-slider-track__tick-label
    @include tools.ltr()
      transform: none

    @include tools.rtl()
      transform: translateX(100%)

  &--last .v-slider-track__tick-label
    @include tools.ltr()
      transform: translateX(-100%)

    @include tools.rtl()
      transform: none

.v-slider-track__tick-label
  position: absolute
  user-select: none
  white-space: nowrap

// Horizontal
.v-slider.v-input--horizontal
  .v-slider-track
    display: flex
    align-items: center
    width: 100%
    height: $slider-track-active-size
    touch-action: pan-y

    &__background
      height: var(--v-slider-track-size)

    &__fill
      height: inherit

  .v-slider-track__tick
    margin-top: calc(#{$slider-track-active-size} / 2)

    @include tools.rtl()
      transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / -2))

    .v-slider-track__tick-label
      margin-top: calc(var(--v-slider-track-size) / 2 + #{$slider-tick-label-margin-top})

      @include tools.ltr()
        transform: translateX(-50%)

      @include tools.rtl()
        transform: translateX(50%)

    &--first
      margin-inline-start: calc(var(--v-slider-tick-size) + 1px)

      .v-slider-track__tick-label
        @include tools.ltr()
          transform: translateX(0%)

        @include tools.rtl()
          transform: translateX(0%)

    &--last
      margin-inline-start: calc(100% - var(--v-slider-tick-size) - 1px)

      .v-slider-track__tick-label
        @include tools.ltr()
          transform: translateX(-100%)

        @include tools.rtl()
          transform: translateX(100%)

// Vertical
.v-slider.v-input--vertical
  .v-slider-track
    height: 100%
    display: flex
    justify-content: center
    width: $slider-track-active-size
    touch-action: pan-x

    &__background
      width: var(--v-slider-track-size)

    &__fill
      width: inherit

  .v-slider-track__ticks
    height: 100%

  .v-slider-track__tick
    margin-inline-start: calc(#{$slider-track-active-size} / 2)
    transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / 2))

    @include tools.rtl()
      transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / 2))

    &--first
      bottom: calc(0% + var(--v-slider-tick-size) + 1px)
    &--last
      bottom: calc(100% - var(--v-slider-tick-size) - 1px)

    .v-slider-track__tick-label
      margin-inline-start: calc(var(--v-slider-track-size) / 2 + #{$slider-tick-label-margin-start})
      transform: translateY(-50%)

// Modifiers
.v-slider-track__ticks--always-show, .v-slider--focused
  .v-slider-track__tick
    opacity: 1

.v-slider-track__background--opacity
  opacity: 0.38