{$class-form}
  @extend $block-xs

{$class-form__block}
  @extend $block-xs
  border: $var-form__element--block-border unless $var-form__element--block-border is false
  margin: $var-form__element--block-margin unless $var-form__element--block-margin is false or is-ident($var-form__element--block-margin)
  padding: $var-form__element--block-padding unless $var-form__element--block-padding is false or is-ident($var-form__element--block-padding)
  + {$class-form__block}
    margin: $var-form__element--block-sibling-margin unless $var-form__element--block-sibling-margin is false or is-ident($var-form__element--block-sibling-margin)

{$class-form__block--inline}
  @extend $inline-block-xs
  vertical-align: middle
  + {$class-form__block--inline}
    margin: $var-form__element--inline-sibling-margin  unless $var-form__element--inline-sibling-margin is false or is-ident($var-form__element--inline-sibling-margin)

{$class-form__block--list}
  @extend $white-space-nowrap
  {$class-form__block--inline}
    @extend $white-space-normal

$pl-form-element
  @extend $block-xs
  @extend $scheme--white
  border: $var-form__element-border-width $var-form__element-border-style $c--disabled-bright;
  padding: $var-form__element-padding unless $var-form__element-padding is false or is-ident($var-form__element-padding)
  transition: $var-form__element-transition unless $var-form__element-transition is false or is-ident($var-form__element-transition)
  width: 100%
  &{$class-form__element--rounded},
  {$class-form__element--rounded} &
    border-radius: $var-form__element-border-radius unless $var-form__element-border-radius is false or is-ident($var-form__element-border-radius)
  &:focus
    box-shadow: $var-form__element-focus-box-shadow $c--disabled unless $var-form__element-focus-box-shadow is false or is-ident($var-form__element-focus-box-shadow)
    outline: 0 none
  &[disabled]
    border-color: $c--disabled-dark
    color-scheme: $c--disabled, $c--disabled-text

{$class-form__input-text}
  @extend $pl-form-element

{$class-form__input-image}
  padding: 0

{$class-form__input-image},
{$class-form__input-check}
  @extend $pl-form-element, $inline-block-xs
  vertical-align: middle
  width: auto

{$class-form-label}
  @extend $block-xs

{$class-form__select}
  @extend $pl-form-element

{$class-form__textarea}
  @extend $pl-form-element

if $class-form__element--invalid is false or is-ident($class-form__element--invalid)
  +form-invalid()
    &,
    &:focus
      border-color: $c--red unless $c--red is false or is-ident($c--red)
      box-shadow: $var-form--invalid-box-shadow $c--red-bright unless $var-form--invalid-box-shadow is false or $c--red-bright is false or is-ident($var-form--invalid-box-shadow) or is-ident($c--red-bright)
else
  {$class-form__element--invalid}
    border-color: $c--red unless $c--red is false or is-ident($c--red)
    box-shadow: $var-form--invalid-box-shadow $c--red-bright unless $var-form--invalid-box-shadow is false or $c--red-bright is false or is-ident($var-form--invalid-box-shadow) or is-ident($c--red-bright)

+form-out-of-range()
  &
    if $class-form__element--invalid is false or is-ident($class-form__element--invalid)
      @extend input:invalid
    else
      @extend {$class-form__element--invalid}