$form-colors: $colors !default

$input-color: var(--text-strong, #{$text-strong}) !default
$input-background-color: var(--scheme-main, #{$scheme-main}) !default
$input-border-color: var(--border, #{$border}) !default
$input-height: var(--control-height, #{$control-height}) !default
$input-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.05) !default
$input-shadow: inset 0 0.0625em 0.125em $input-shadow-color !default
$input-placeholder-color: bulmaRgba($text-strong, 0.3) !default

$input-hover-color: var(--text-strong, #{$text-strong}) !default
$input-hover-border-color: var(--border-hover, #{$border-hover}) !default

$input-focus-color: var(--text-strong, #{$text-strong}) !default
$input-focus-border-color: var(--link, #{$link}) !default
$input-focus-box-shadow-size: 0 0 0 0.125em !default
$input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default

$input-disabled-color: var(--text-light, #{$text-light}) !default
$input-disabled-background-color: var(--background, #{$background}) !default
$input-disabled-border-color: var(--background, #{$background}) !default
$input-disabled-placeholder-color: bulmaRgba($text-light, 0.3) !default

$input-arrow: var(--link, #{$link}) !default

$input-icon-color: var(--border, #{$border}) !default
$input-icon-active-color: var(--text, #{$text}) !default

$input-radius: var(--radius, #{$radius}) !default

=input
  @extend %control
  background-color: var(--input-background-color, #{$input-background-color})
  border-color: var(--input-border-color, #{$input-border-color})
  border-radius: var(--input-radius, #{$input-radius})
  color: var(--input-color, #{$input-color})
  +placeholder
    color: var(--input-placeholder-color, #{$input-placeholder-color})
  &:hover,
  &.is-hovered
    border-color: var(--input-hover-border-color, #{$input-hover-border-color})
  &:focus,
  &.is-focused,
  &:active,
  &.is-active
    border-color: var(--input-focus-border-color, #{$input-focus-border-color})
    box-shadow: var(--input-focus-box-shadow-size, #{$input-focus-box-shadow-size}) var(--input-focus-box-shadow-color, #{$input-focus-box-shadow-color})
  &[disabled],
  fieldset[disabled] &
    background-color: var(--input-disabled-background-color, #{$input-disabled-background-color})
    border-color: var(--input-disabled-border-color, #{$input-disabled-border-color})
    box-shadow: none
    color: var(--input-disabled-color, #{$input-disabled-color})
    +placeholder
      color: var(--input-disabled-placeholder-color, #{$input-disabled-placeholder-color})

%input
  +input