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

// Theme
.v-slider-thumb
  touch-action: none
  color: rgb(var(--v-theme-surface-variant))

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

.v-slider-thumb__label
  background: rgba(var(--v-theme-surface-variant), .7)
  color: rgb(var(--v-theme-on-surface-variant))

  &::before
    color: rgba(var(--v-theme-surface-variant), .7)

// Block
.v-slider-thumb
  outline: none
  position: absolute
  transition: $slider-transition

.v-slider-thumb__surface
  cursor: pointer
  width: var(--v-slider-thumb-size)
  height: var(--v-slider-thumb-size)
  border-radius: $slider-thumb-border-radius
  user-select: none
  background-color: currentColor

  &::before
    transition: 0.3s settings.$standard-easing
    content: ''
    color: inherit
    top: 0
    left: 0
    width: 100%
    height: 100%
    border-radius: $slider-thumb-border-radius
    background: currentColor
    position: absolute
    pointer-events: none
    opacity: 0

  &::after
    content: ''
    width: $slider-thumb-touch-size
    height: $slider-thumb-touch-size
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)

.v-slider-thumb__label-container
  position: absolute
  transition: $slider-thumb-label-transition

.v-slider-thumb__label
  display: flex
  align-items: center
  justify-content: center
  font-size: $slider-thumb-label-font-size
  min-width: $slider-thumb-label-min-width
  height: $slider-thumb-label-height
  border-radius: $slider-thumb-label-border-radius
  padding: $slider-thumb-label-padding
  position: absolute
  user-select: none
  transition: $slider-thumb-label-transition

  &::before
    content: ''
    width: 0
    height: 0
    position: absolute

.v-slider-thumb__ripple
  position: absolute
  left: calc(var(--v-slider-thumb-size) / -2)
  top: calc(var(--v-slider-thumb-size) / -2)
  width: calc(var(--v-slider-thumb-size) * 2)
  height: calc(var(--v-slider-thumb-size) * 2)
  background: inherit

// Horizontal
.v-slider.v-input--horizontal
  .v-slider-thumb
    top: 50%
    transform: translateY(-50%)
    inset-inline-start: calc(var(--v-slider-thumb-position) - var(--v-slider-thumb-size) / 2)

  .v-slider-thumb__label-container
    left: calc(var(--v-slider-thumb-size) / 2)
    top: 0

  .v-slider-thumb__label
    bottom: $slider-thumb-label-offset

    +tools.ltr()
      transform: translateX(-50%)
    +tools.rtl()
      transform: translateX(50%)

    &::before
      border-left: $slider-thumb-label-wedge-size solid transparent
      border-right: $slider-thumb-label-wedge-size solid transparent
      border-top: $slider-thumb-label-wedge-size solid currentColor
      bottom: -$slider-thumb-label-wedge-size

// Vertical
.v-slider.v-input--vertical
  .v-slider-thumb
    top: calc(var(--v-slider-thumb-position) - var(--v-slider-thumb-size) / 2)

  .v-slider-thumb__label-container
    top: calc(var(--v-slider-thumb-size) / 2)
    right: 0

  .v-slider-thumb__label
    top: math.div($slider-thumb-label-height, -2)
    left: $slider-thumb-label-offset

    &::before
      border-right: $slider-thumb-label-wedge-size solid currentColor
      border-top: $slider-thumb-label-wedge-size solid transparent
      border-bottom: $slider-thumb-label-wedge-size solid transparent
      left: -$slider-thumb-label-wedge-size

// Modifiers
.v-slider-thumb--focused
  .v-slider-thumb__surface::before
    transform: scale(2)
    opacity: $slider-thumb-focus-opacity

.v-slider-thumb--pressed
  transition: none

  .v-slider-thumb__surface::before
    opacity: $slider-thumb-pressed-opacity

@media (hover: hover)
  .v-slider-thumb:hover
    .v-slider-thumb__surface::before
      transform: scale(2)

  .v-slider-thumb:hover:not(.v-slider-thumb--focused)
    .v-slider-thumb__surface::before
      opacity: $slider-thumb-hover-opacity