@import "../utilities/controls"
@import "../utilities/mixins"

$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-hsla: bulmaCSSVarHsla(var(--link, #{$link}), 0.25) !default // has to be declared in css vars
$input-focus-box-shadow-color: var(--input-focus-box-shadow-color-hsla, #{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

$css-vars-map: ('input-color': ($input-color),'input-background-color': ($input-background-color),'input-border-color': ($input-border-color),'input-height': ($input-height),'input-shadow-color': ($input-shadow-color),'input-shadow': ($input-shadow),'input-placeholder-color': ($input-placeholder-color),'input-hover-color': ($input-hover-color),'input-hover-border-color': ($input-hover-border-color),'input-focus-color': ($input-focus-color),'input-focus-border-color': ($input-focus-border-color),'input-focus-box-shadow-size': ($input-focus-box-shadow-size),'input-focus-box-shadow-color-hsla': ($input-focus-box-shadow-color-hsla),'input-focus-box-shadow-color': ($input-focus-box-shadow-color),'input-disabled-color': ($input-disabled-color),'input-disabled-background-color': ($input-disabled-background-color),'input-disabled-border-color': ($input-disabled-border-color),'input-disabled-placeholder-color': ($input-disabled-placeholder-color),'input-arrow': ($input-arrow),'input-icon-color': ($input-icon-color),'input-icon-active-color': ($input-icon-active-color),'input-radius': ($input-radius))
// --input-color: #{$input-color}
// --input-background-color: #{$input-background-color}
// --input-border-color: #{$input-border-color}
// --input-height: #{$input-height}
// --input-shadow-color: #{$input-shadow-color}
// --input-shadow: #{$input-shadow}
// --input-placeholder-color: #{$input-placeholder-color}
// --input-hover-color: #{$input-hover-color}
// --input-hover-border-color: #{$input-hover-border-color}
// --input-focus-color: #{$input-focus-color}
// --input-focus-border-color: #{$input-focus-border-color}
// --input-focus-box-shadow-size: #{$input-focus-box-shadow-size}
// --input-focus-box-shadow-color-hsla: #{$input-focus-box-shadow-color-hsla}
// --input-focus-box-shadow-color: #{$input-focus-box-shadow-color}
// --input-disabled-color: #{$input-disabled-color}
// --input-disabled-background-color: #{$input-disabled-background-color}
// --input-disabled-border-color: #{$input-disabled-border-color}
// --input-disabled-placeholder-color: #{$input-disabled-placeholder-color}
// --input-arrow: #{$input-arrow}
// --input-icon-color: #{$input-icon-color}
// --input-icon-active-color: #{$input-icon-active-color}
// --input-radius: #{$input-radius}

.input, [class^="input-"]
  +registerCSSVars($css-vars-map, $at-root)

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

%input
  +input