// boolean element
.Formol_Field--type-checkbox .Formol_Field, .Formol_Field--type-radio .Formol_Field, .Formol_Field--type-checkbox-set .Formol_FieldSet, .Formol_Field--type-radio-set .Formol_FieldSet
  &__label
    @extend .Formol_Field__element
    align-items: center
    color: $formol-color-inactive
    cursor: pointer
    display: inline-flex
    transition: color .2s, border-color .2s

    &--on, &--on:hover
      color: $formol-color

  &__title
    font-size: $formol-font-size
    margin-left: .5em
    order: 1


// fieldset
.Formol_Field--type-checkbox-set, .Formol_Field--type-radio-set
  .Formol_FieldSet
    border: 0
    margin: .5em 0
    padding: 0

    &__label
      @extend .Formol_Field

      &--focus, &--focus:hover
        color: $formol-color-action

  .Formol_FieldSet .Formol_FieldSet__label
    margin: 0 calc(#{$formol-field-margin} / 2) calc(#{$formol-field-margin} / 2) 0

.Formol_BooleanField
  accent-color: $formol-color-action
  margin: 0



.Formol_Field--type-checkbox.Formol_Field--readOnly .Formol_Field, .Formol_Field--type-radio.Formol_Field--readOnly .Formol_Field, .Formol_Field--type-checkbox-set.Formol_Field--readOnly .Formol_FieldSet, .Formol_Field--type-radio-set.Formol_Field--readOnly .Formol_FieldSet
  &__label
    display: none

    &--on
      +read-only-field__element
      display: inline-flex
      margin: 0 calc(#{$formol-field-margin} / 2) calc(#{$formol-field-margin} / 2) 0



.Formol_Field--type-checkbox.Formol_Field--disabled .Formol_Field, .Formol_Field--type-radio.Formol_Field--disabled .Formol_Field, .Formol_Field--type-checkbox-set.Formol_Field--disabled .Formol_FieldSet, .Formol_Field--type-radio-set.Formol_Field--disabled .Formol_FieldSet
  &__label
    cursor: default