%checkbox-radio
  --checkbox-radio-hover-color: #{$input-hover-color}
  --checkbox-radio-disabled-color: #{$input-disabled-color}
  cursor: pointer
  display: inline-block
  line-height: 1.25
  position: relative
  input
    cursor: pointer
  &:hover
    color: var(--checkbox-radio-hover-color)
  &[disabled],
  fieldset[disabled] &,
  input[disabled]
    color: var(--checkbox-radio-disabled-color)
    cursor: not-allowed

.checkbox
  @extend %checkbox-radio

.radio
  @extend %checkbox-radio
  & + .radio
    +ltr-property("margin", 0.5em, false)