@import '../index'

.form-switch.disable
  opacity: 0.7;

.form-switch-button
  position: relative

.form-switch-button label,
.form-switch-button-onOff
  -webkit-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none
  cursor: pointer

.form-switch-button label.checked
  color: $app['priorities']['success']['300']

.form-switch-button label.unchecked
  color: $app['priorities']['important']['300']

.form-switch-button-input
  display none
  position: absolute
  opacity: 0

.form-switch-button-onOff
  background-color:  $app['palette']['bg-thirdary']['1']
  vertical-align: middle
  width: 1em
  height: 0.5em
  border-radius: 999px
  transition-duration: .4s
  transition-property: background-color, box-shadow

.form-switch-button-onOff.checked
  background-color: $app['priorities']['success']['300']

.form-switch-button-onOff.unchecked
  background-color: $app['priorities']['important']['300']

.form-switch-button-on,
.form-switch-button-off
  position: absolute
  color: white
  font-size: 1.6em
  margin-top: 12px

.form-switch-button-onOff
  display: inline-block;
  width: 1.5em;
  height: 1em;
  padding: 2px;
  margin: 0 .3em;

.form-switch-button-icon
  width: 1em
  height: 1em
  border-radius: inherit
  transition-timing-function: cubic-bezier(1,0,0,1)
  transition-duration: 0.4s
  transition-property: transform, background-color
  pointer-events: none
  background-color: $app['white']

.form-switch-button-icon.checked
  transform: translate3d(.5em, 0, 0)