{$class-input-checkbox}
  @extend $inline-block-xs, $pointer-xs, $position-relative
  user-select: none
  input
    @extend $invisible-xs, $absolute-top-left
  input:checked + span:after
    transform: scale(1)
  span:after
  span:before
    @extend $align-center-xs
    shape-square: $var-form__checkbox-size unless $var-form__checkbox-size is false or is-ident($var-form__checkbox-size)
    vertical-align: middle
  span:after
    @extend $font-700-xs, $absolute-top-left
    content: '\2713 '
    color: $c--blue
    line-height: 1.5
    transform: scale(0)
    transition: $var-form__checkbox-transition unless $var-form__checkbox-transition is false
  span:before
    @extend $empty-block-xs, $inline-block-xs
    @extend $scheme--transparent-background, $scheme--gray-hollow
    border-radius: $var-form__checkbox-border-radius unless $var-form__checkbox-border-radius is false or is-ident($var-form__checkbox-border-radius)
    border-style: $var-form__checkbox-border-style unless $var-form__checkbox-border-style is false
    border-width: $var-form__checkbox-border-width unless $var-form__checkbox-border-width is false or is-ident($var-form__checkbox-border-width)

{$class-input-checkbox--black} span:after
  color: $c--black
{$class-input-checkbox--blue} span:after
  color: $c--blue
{$class-input-checkbox--gray} span:after
  color: $c--gray
{$class-input-checkbox--green} span:after
  color: $c--green
{$class-input-checkbox--orange} span:after
  color: $c--orange
{$class-input-checkbox--purple} span:after
  color: $c--purple
{$class-input-checkbox--red} span:after
  color: $c--red
{$class-input-checkbox--yellow} span:after
  color: $c--yellow

{$class-input-radio}
  @extend {$class-input-checkbox}
  input:checked + span:after
    transform: scale($var-form__radio-scale-max) translateY($var-form__radio-translate-y)
  span:after
  span:before
    border-radius: $var-form__radio-border-radius unless $var-form__radio-border-radius is false or is-ident($var-form__radio-border-radius)
  span:after
    @extend $scheme--blue
    content: ''
    top: 50%
    transform: scale($var-form__radio-scale-min) translateY($var-form__radio-translate-y)

{$class-input-radio}{$class-input-radio--black} span:after
  @extend $scheme--black
{$class-input-radio}{$class-input-radio--blue} span:after
  @extend $scheme--blue
{$class-input-radio}{$class-input-radio--gray} span:after
  @extend $scheme--gray
{$class-input-radio}{$class-input-radio--green} span:after
  @extend $scheme--green
{$class-input-radio}{$class-input-radio--orange} span:after
  @extend $scheme--orange
{$class-input-radio}{$class-input-radio--purple} span:after
  @extend $scheme--purple
{$class-input-radio}{$class-input-radio--red} span:after
  @extend $scheme--red
{$class-input-radio}{$class-input-radio--yellow} span:after
  @extend $scheme--yellow