.Formol_Field--type-switch
  .Formol_Field__label
    > .Formol_Field__element
      background-color: transparent
      border: 0
      color: inherit
      margin: .75em 0
      padding: 0

    &--on
      color: $formol-color

      input[type='checkbox'] + label
        &::after
          color: $formol-color-action

  label
    cursor: pointer
    display: inline-block


  // Switch
.Formol_SwitchButton
  position: relative
  margin: 1em 0

  input[type='checkbox'] + label
    @extend .Formol_Field__element
    align-items: center
    border-radius: 1em !important
    color: inherit
    display: inline-flex
    flex-direction: row
    height: 1.5em
    margin: 0 .5em
    padding: .25em
    user-select: none
    vertical-align: middle
    width: 3em

    &::after
      background-color: currentColor
      border-radius: 1em
      content: ''
      display: block
      height: 1em
      transition: all .4s
      width: 1em

  input[type='checkbox']:checked + label::after
    margin-left: 1.4em


  // Hide the default input checkbox
  input[type='checkbox']
    +hidden-input