+install(kernel-element-form-check-radio)

  .fm-check label,
  .fm-radio label
    flex: 0 1 auto
    padding-left: $form-element-checkfield-size-em + 0.4em
    line-height: typo-line-height($form-element-typography-size-level)
    overflow: hidden
    -webkit-user-select: none
    -moz-user-select: none
    -ms-user-select: none
    user-select: none

  .fm-check label:not(:last-child),
  .fm-radio label:not(:last-child)
    margin-right: 1.2em

  .fm-check label input,
  .fm-radio label input
    $line-height-rem: typo-line-height($form-element-typography-size-level)
    $font-size-rem: typo-size($form-element-typography-size-level)
    $line-height-em: $line-height-rem / $font-size-rem * 1em
    $margin-top: ($line-height-em - $form-element-checkfield-size-em) / 2
    $margin-left: - $form-element-checkfield-size-em - 0.4em
    float: left
    margin: $margin-top 0.4em 0 $margin-left

  .fm-check input,
  .fm-radio input
    width: $form-element-checkfield-size-em
    height: $form-element-checkfield-size-em
    border: $form-element-border-style $form-element-border-width $form-element-border-color
    background: $form-element-background
    box-shadow: $form-element-box-shadow

  .fm-check input
    border-radius: $form-element-border-radius
    transform: scale(0.9)

  .fm-radio input
    border-radius: 100%

  .fm-check[data-error] input,
  .fm-radio[data-error] input
    background: $form-element-background-on-error
    border-color: $form-element-border-color-on-error
    box-shadow: $form-element-box-shadow-on-error

  .fm.fm-check .focus,
  .fm.fm-radio .focus
    background: $form-element-background-on-focus
    border-color: $form-element-border-color-on-focus
    box-shadow: $form-element-box-shadow-on-focus

  .fm.fm-check input:checked,
  .fm.fm-radio input:checked
    +form-element-checkfield-background($form-element-checked-icon, $form-element-checked-icon-color, $form-element-background)

  @if $form-element-background-on-error or $form-element-checked-icon-color-on-error
    // sass-lint:disable empty-args
    .fm.fm-check[data-error] input:checked,
    .fm.fm-radio[data-error] input:checked
      $icon-color: existing($form-element-checked-icon-color-on-error, $form-element-checked-icon-color)
      $background: form-element-background-on-error()
      +form-element-checkfield-background($form-element-checked-icon, $icon-color, $background)
    // sass-lint:enable empty-args

  @if $form-element-background-on-focus or $form-element-checked-icon-color-on-focus
    // sass-lint:disable empty-args
    .fm.fm-check input.focus:checked,
    .fm.fm-radio input.focus:checked
      $icon-color: existing($form-element-checked-icon-color-on-focus, $form-element-checked-icon-color)
      $background: form-element-background-on-focus()
      +form-element-checkfield-background($form-element-checked-icon, $icon-color, $background)
    // sass-lint:enable empty-args



  .fm-small.fm-check label,
  .fm-small.fm-radio label
    line-height: typo-line-height($form-element-small-typography-size-level)

  .fm-large.fm-check label,
  .fm-large.fm-radio label
    line-height: typo-line-height($form-element-large-typography-size-level)

  @if $form-element-small-typography-size-level
    .fm-small.fm-check label input,
    .fm-small.fm-radio label input
      $line-height-rem: typo-line-height($form-element-small-typography-size-level)
      $typo-size-rem: typo-size($form-element-small-typography-size-level)
      $line-height-em: $line-height-rem / $typo-size-rem * 1em
      $margin-top: ($line-height-em - $form-element-checkfield-size-em) / 2
      margin-top: $margin-top

  @if $form-element-large-typography-size-level
    .fm-large.fm-check label input,
    .fm-large.fm-radio label input
      $line-height-rem: typo-line-height($form-element-large-typography-size-level)
      $typo-size-rem: typo-size($form-element-large-typography-size-level)
      $line-height-em: $line-height-rem / $typo-size-rem * 1em
      $margin-top: ($line-height-em - $form-element-checkfield-size-em) / 2
      margin-top: $margin-top