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

.v-switch
  .v-label
    padding-inline-start: $switch-label-margin-inline-start

.v-switch__loader
  display: flex

.v-switch__track,
.v-switch__thumb
  background-color: currentColor
  transition: none

  .v-selection-control--error:not(.v-selection-control--disabled) &
    background-color: $switch-error-background-color

.v-switch__thumb
  .v-selection-control--dirty &
    color: currentColor

.v-switch__track
  border-radius: $switch-track-radius
  height: $switch-track-height
  opacity: $switch-track-opacity
  width: $switch-track-width
  cursor: pointer

  .v-switch--inset &
    border-radius: $switch-inset-track-border-radius
    height: $switch-inset-track-height
    width: $switch-inset-track-width

.v-switch__thumb
  align-items: center
  border-radius: $switch-thumb-radius
  color: rgb(var(--v-theme-surface))
  display: flex
  height: $switch-thumb-height
  justify-content: center
  width: $switch-thumb-width
  pointer-events: none
  transition: $switch-control-input-transition

  @include tools.elevation($switch-thumb-elevation)

  .v-switch--inset &
    @include tools.elevation(0)

  .v-switch:not(.v-switch--loading) .v-icon ~ &
    display: none

.v-switch--loading .v-selection-control__input > .v-icon
  display: none

.v-switch
  $switch-thumb-transform: $switch-track-width * .5 - $switch-thumb-width * .5 + $switch-thumb-offset

  .v-selection-control
    min-height: var(--v-input-control-height)

  .v-selection-control__input
    border-radius: 50%
    transition: $switch-control-input-transition
    transform: translateX(-$switch-thumb-transform)
    position: absolute

  .v-selection-control--dirty
    .v-selection-control__input
      transform: translateX($switch-thumb-transform)

  &.v-switch--indeterminate
    .v-selection-control__input
      transform: scale(.8)
    .v-switch__thumb
      transform: scale(.75)
      box-shadow: none

  &.v-switch--inset
    .v-selection-control__wrapper
      width: auto