VSwitch.sass

@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-progress-circular
    color: $switch-loader-color

.v-switch__track,
.v-switch__thumb
  transition: none

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

.v-switch__track-true
  margin-inline-end: auto

  .v-selection-control:not(.v-selection-control--dirty) &
    opacity: 0

.v-switch__track-false
  margin-inline-start: auto

  .v-selection-control--dirty &
    opacity: 0

.v-switch__track
  display: inline-flex
  align-items: center
  font-size: .5rem
  padding: 0 5px
  background-color: $switch-track-background
  border-radius: $switch-track-radius
  height: $switch-track-height
  opacity: $switch-track-opacity
  min-width: $switch-track-width
  cursor: pointer
  transition: $switch-track-transition

  .v-switch--inset &
    border-radius: $switch-inset-track-border-radius
    font-size: .75rem
    height: $switch-inset-track-height
    min-width: $switch-inset-track-width

.v-switch__thumb
  align-items: center
  background-color: $switch-thumb-background
  color: $switch-thumb-color
  border-radius: $switch-thumb-radius
  display: flex
  font-size: .75rem
  height: $switch-thumb-height
  justify-content: center
  width: $switch-thumb-width
  pointer-events: none
  transition: $switch-thumb-transition
  position: relative
  overflow: hidden

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

  .v-switch.v-switch--flat:not(.v-switch--inset) &
    background: $switch-thumb-flat-background
    color: $switch-thumb-flat-color

    @include tools.elevation(0)

  .v-switch--inset &
    height: $switch-inset-thumb-height
    width: $switch-inset-thumb-width
    transform: scale(calc($switch-inset-thumb-off-height / $switch-inset-thumb-height))

    &--filled
      transform: none

  .v-switch--inset .v-selection-control--dirty &
    transform: none
    transition: .15s .05s transform settings.$decelerated-easing

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

  &.v-input
    flex: $switch-flex

  .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-icon
      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