/* Thanks to Guus Lieben for the Material Design Switch */

.switch-ctn
  margin: 20px 16px
  position: relative

  &.compact
    margin: 0

.disabled
  .switch-label
    cursor: not-allowed

  .switch-label-text
    opacity: 0.4

.switch-input
  -moz-appearance: none
  -webkit-appearance: none
  appearance: none
  height: 20px
  left: -3px
  position: absolute
  top: calc(50% - 3px)
  -ms-transform: translate(0, (-50%))
  -webkit-transform: translate(0, -50%)
  transform: translate(0, -50%)
  width: 34px

.switch-label
  position: relative
  display: inline-block
  cursor: pointer
  font-weight: 500
  text-align: left
  padding: 12px 0 12px 44px

  &:before, &:after
    content: ""
    position: absolute
    margin: 0
    outline: 0
    top: 50%
    -ms-transform: translate(0, -50%)
    -webkit-transform: translate(0, -50%)
    transform: translate(0, -50%)
    -webkit-transition: all 0.3s ease
    transition: all 0.3s ease

  &:before
    left: 1px
    width: 34px
    height: 14px
    background-color: #9E9E9E
    border-radius: 8px

    .switch-input:checked + &
      background-color: var(--accent-color-light)

    .switch-input:disabled + &
      background-color: #9E9E9E

  &:after
    left: 0
    width: 20px
    height: 20px
    background-color: #FAFAFA
    border-radius: 50%
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084)

    .switch-input:checked + &
      background-color: var(--accent-color)
      -ms-transform: translate(80%, -50%)
      -webkit-transform: translate(80%, -50%)
      transform: translate(80%, -50%)

    .switch-input:disabled + &
      background-color: #BDBDBD
  
  @media (max-width: 680px)
    max-width: 250px