@import '../../../styles/mixins'
@import '../../../styles/colors'
@import 'root'

@keyframes rotateSwitch
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)

.vs-switch
  color: #fff
  padding: 5px
  border-radius: 20px
  min-width: 48px
  height: 28px
  border: 0px
  position: relative
  display: flex
  align-items: center
  justify-content: center
  background: vs-color('gray-3')
  transition: all .25s ease
  overflow: hidden
  &--icon
    .vs-switch__input
      &:checked
        ~ .vs-switch__circle
          color: #fff !important
    .vs-switch__circle
      background: transparent !important
      box-shadow: none !important
      i
        opacity: 1
        font-size: 1.3rem
  &--indeterminate
    .vs-switch__input
      pointer-events: none
    .vs-switch__circle
      left: 50% !important
      transform: translate(-50%)
  &--square
    border-radius: 5px
    .vs-switch__background
      border-radius: 5px !important
    .vs-switch__circle
      border-radius: 5px !important
  &:after
    transition: all 0s ease 0s
    opacity: 0
    visibility: hidden
    content: ''
    position: absolute
    width: calc(100% - 8px)
    height: calc(100% - 8px)
    border: 3px dashed vs-color('color')
    z-index: 200
    border-radius: 50%
    border-top: 3px solid transparent
    border-right: 3px solid transparent
    animation: rotateSwitch .6s linear infinite .25s
    pointer-events: none
  &:before
    pointer-events: none
    transition: all 0s ease 0s
    opacity: 0
    visibility: hidden
    content: ''
    position: absolute
    width: calc(100% - 8px)
    height: calc(100% - 8px)
    border: 3px solid vs-color('color')
    z-index: 200
    border-radius: 50%
    border-top: 3px solid transparent
    border-right: 3px solid transparent
    animation: rotateSwitch .6s ease infinite .25s
  &--loading
    width: 28px !important
    min-width: 28px !important
    pointer-events: none
    border-radius: 20px !important
    .vs-switch__circle
      border-radius: 50% !important
    .vs-switch__background
      opacity: 0 !important
    &:after
      opacity: 1
      visibility: visible
      transition: all .25s ease .3s
    &:before
      opacity: 1
      visibility: visible
      transition: all .25s ease .3s
  &:hover
    background: vs-color('gray-4')
  &:active
    transform: scale(.9)
  &__background
    width: 100%
    height: auto
    position: absolute
    background: vs-color('color')
    border-radius: inherit
    z-index: 2
    transition: all .25s ease-out
    transform: scale(1)
    // left: 8px
    left: -100%
    border-radius: 50%
    padding-bottom: 100%
  &__text
    font-size: .7rem
    padding: 5px
    padding-left: 25px
    transition: all .25s ease .05s
    color: vs-color('text')
    z-index: 9
    display: flex
    align-items: center
    justify-content: center
    position: relative
    overflow: hidden
    white-space: nowrap
    &.on
      transform: translate(-100%)
      position: absolute
      opacity: 0
    i
      font-size: 1rem
      opacity: .7
  &__circle
    width: 20px
    height: 20px
    background: vs-color('background')
    border-radius: 20px
    transition: all .25s ease
    position: absolute
    z-index: 10
    left: 4px
    color: vs-color('text')
    display: flex
    align-items: center
    justify-content: center
    i
      font-size: .8rem
  &__input
    position: absolute
    width: 100%
    opacity: 0 !important
    height: 100%
    border-radius: inherit
    z-index: 100
    top: 0px
    left: 0px
    margin: 0px
    cursor: pointer
    &:active
      &:checked
        ~ .vs-switch__circle
          left: calc(100% - 30px)
      ~ .vs-switch__circle
        width: 25px
    &:checked
      ~ .vs-switch__background
        opacity: 1
        transform: scale(1)
        width: 100%
        padding-bottom: 100%
        left: 0px
        border-radius: 50%
        transition: all .25s ease
      ~ .vs-switch__text
        padding-left: 5px
        padding-right: 25px
        color: #fff
        i
          opacity: 1
        &.on
          transform: translate(0)
          position: relative
          opacity: 1
        &.off
          transform: translate(100%)
          position: absolute
          opacity: 0
      ~ .vs-switch__circle
        left: calc(100% - 24px)
        box-shadow: -5px 0px 25px 0px vs-color('background', .6)
        color: vs-color('color')