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

@include tools.layer('components')
  .v-switch
    --v-switch-scale: 1

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

  @each $name, $size in $switch-sizes
    .v-switch--size-#{$name}
      --v-switch-scale: #{math.div(list.nth($size, 1), $switch-track-height)}
      --v-switch-track-height: #{list.nth($size, 1)}
      --v-switch-thumb-height: #{list.nth($size, 2)}
      --v-switch-thumb-width: #{list.nth($size, 3)}

  @each $name, $size in $switch-inset-sizes
    .v-switch--inset.v-switch--size-#{$name}
      --v-switch-scale: #{math.div(list.nth($size, 1), $switch-inset-track-height)}
      --v-switch-track-height: #{list.nth($size, 1)}
      --v-switch-thumb-height: #{list.nth($size, 2)}
      --v-switch-thumb-width: #{list.nth($size, 3)}

  .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: var(--v-switch-track-height)
    opacity: $switch-track-opacity
    min-width: calc(#{$switch-track-width} * var(--v-switch-scale))
    cursor: pointer
    transition: $switch-track-transition

    .v-switch--inset &
      border-radius: $switch-inset-track-border-radius
      font-size: .75rem
      min-width: calc(#{$switch-inset-track-width} * var(--v-switch-scale))

  .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: var(--v-switch-thumb-height)
    justify-content: center
    width: var(--v-switch-thumb-width)
    pointer-events: none
    transition: $switch-thumb-transition
    position: relative
    overflow: hidden

    .v-switch:not(.v-switch--inset) &
      @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 &
      transform: scale(var(--v-switch-inset-thumb-off-scale, #{$switch-inset-thumb-off-scale}))

      &--filled
        transform: none

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

  .v-switch--inset-material
    .v-switch__track
      opacity: $switch-inset-track-opacity
      background-color: $switch-inset-unselected-track-color
      border: $switch-inset-border-width solid $switch-inset-unselected-thumb-color

    .v-switch__thumb
      background-color: $switch-inset-unselected-thumb-color
      color: $switch-inset-unselected-track-color

    .v-selection-control--dirty
      .v-switch__track
        border-color: transparent
        background-color: $switch-inset-selected-track-color

      .v-switch__thumb
        background-color: $switch-inset-selected-thumb-color
        color: $switch-inset-selected-track-color

    .v-selection-control__input:active .v-switch__thumb
      transform: scale(var(--v-switch-inset-thumb-pressed-scale, #{$switch-inset-thumb-pressed-scale}))

    .v-selection-control__input:before
      --v-hover-opacity: 0.08
      z-index: 1

    // focus is the track outline, so drop the overlay's focus state layer
    .v-selection-control--focus-visible
      .v-selection-control__input:before
        opacity: 0

      .v-switch__track
        outline: $switch-focus-outline-width solid $switch-focus-outline-color
        outline-offset: $switch-focus-outline-offset

    .v-selection-control--disabled
      opacity: 1

      .v-label
        opacity: var(--v-disabled-opacity)

      .v-switch__track
        background-color: $switch-inset-disabled-unselected-track-color
        border-color: $switch-inset-disabled-unselected-border-color

      .v-switch__thumb
        background-color: $switch-inset-disabled-unselected-thumb-color

        .v-icon
          opacity: .8

    .v-selection-control--disabled.v-selection-control--dirty
      .v-switch__track
        background-color: $switch-inset-disabled-selected-track-color
        border-color: transparent

      .v-switch__thumb
        background-color: $switch-inset-disabled-selected-thumb-color

        .v-icon
          opacity: .4

  .v-switch--inset-square
    .v-switch__track
      border-radius: $switch-inset-square-track-radius

    .v-switch__thumb
      border-radius: $switch-inset-square-thumb-radius

  .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
      position: absolute
      height: calc(var(--v-switch-thumb-height) * 1.666666667)
      width: calc(var(--v-switch-thumb-height) * 1.666666667)

      @include tools.ltr()
        transform: translateX(calc(#{-$switch-thumb-transform} * var(--v-switch-scale)))
      @include tools.rtl()
        transform: translateX(calc(#{$switch-thumb-transform} * var(--v-switch-scale)))

      .v-icon
        position: absolute

      input
        margin: 0

    .v-selection-control--dirty
      .v-selection-control__input
        @include tools.ltr()
          transform: translateX(calc(#{$switch-thumb-transform} * var(--v-switch-scale)))
        @include tools.rtl()
          transform: translateX(calc(#{-$switch-thumb-transform} * var(--v-switch-scale)))

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

    &.v-input--vertical
      .v-label
        min-width: max-content

      .v-selection-control__wrapper
        transform: $switch-thumb-vertical-transform

  @media (forced-colors: active)
    .v-switch
      .v-switch__loader
        .v-progress-circular
          color: currentColor

      .v-switch__thumb
        background-color: buttontext

      .v-switch__track,
      .v-switch__thumb
        border: 1px solid
        color: buttontext

      &:not(.v-switch--loading):not(.v-input--disabled)
        .v-selection-control--dirty
          .v-switch__thumb
            background-color: highlight

      &:not(.v-input--disabled)
        .v-selection-control--dirty
          .v-switch__track
            background-color: highlight

          .v-switch__track,
          .v-switch__thumb
            color: highlight

      &.v-switch--inset
        .v-switch__track
          border-width: 2px

        &:not(.v-switch--loading):not(.v-input--disabled)
          .v-selection-control--dirty
            .v-switch__thumb
              background-color: highlighttext
              color: highlighttext

      &.v-input--disabled
        .v-switch__thumb
          background-color: graytext

        .v-switch__track,
        .v-switch__thumb
          color: graytext

      &.v-switch--loading
        .v-switch__thumb
          background-color: canvas

        &.v-switch--inset,
        &.v-switch--indeterminate
          .v-switch__thumb
            border-width: 0