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

@include tools.layer('components')
  // 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: tools.theme-color('surface-variant', .7)
    color: rgb(var(--v-theme-on-surface-variant))

    > .v-slider-thumb__label-wedge
      background: inherit

  // 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

    @media (forced-colors: active)
      background-color: highlight

    &::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

    > .v-slider-thumb__label-wedge
      width: $slider-thumb-label-wedge-size * 2
      height: $slider-thumb-label-wedge-size * 2
      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

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

      > .v-slider-thumb__label-wedge
        clip-path: polygon(50% 100%, 0 50%, 100% 50%)
        bottom: calc(#{-$slider-thumb-label-wedge-size} + 0.2px)

  // 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

      > .v-slider-thumb__label-wedge
        clip-path: polygon(0 50%, 50% 0, 50% 100%)
        left: calc(#{-$slider-thumb-label-wedge-size} + 0.2px)

  // 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