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

@include tools.layer('components')
  .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

    .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 &
      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
      position: absolute
      @include tools.ltr()
        transform: translateX(-$switch-thumb-transform)
      @include tools.rtl()
        transform: translateX($switch-thumb-transform)

      .v-icon
        position: absolute

    .v-selection-control--dirty
      .v-selection-control__input
        @include tools.ltr()
          transform: translateX($switch-thumb-transform)
        @include tools.rtl()
          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

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