input,
select,
textarea,
.vclInput
  min-height: var(--input-height)
  line-height: var(--input-line-height)
  box-sizing: border-box

input,
select,
textarea,
button,
.vclInput
  font-family: inherit
  vertical-align: middle

textarea,
textarea.vclInput
  line-height: var(--input-textarea-line-height)

/* remove clear-button in ie10+ */
::-ms-clear
  display: none

/* remove spinner buttons from browsers */

.vclInput[type=number]::-webkit-outer-spin-button,
.vclInput[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  margin: 0

.vclInput[type=number]
  -moz-appearance: textfield

select,
textarea,
input,
.vclInput
  width: 100%
  display: inline-block
  padding-top: 0
  padding-right: 0.4em
  padding-bottom: 0
  padding-left: 0.4em
  vertical-align: middle
  margin-bottom: var(--form-control-vertical-gap)

input[type="radio"],
input[type="checkbox"]
  width: auto

.vclInput
  overflow: hidden
  word-wrap: normal
  display: flex
  align-items: center
  content: none

select
  width: auto

select:focus,
textarea:focus,
input:focus,
.vclInput:focus
  outline: none

/* Show an outline for elements which cannot be highlighted by border colors */
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus
  outline: thin dotted var(--input-outline-focus-color)
  outline: 0.35em auto -webkit-focus-ring-color

/* Indicate a click will do something useful for a label */
label
  cursor: pointer

select[multiple],
select[size]
  height: auto

select,
input[type="file"]
  padding: 0

textarea
  overflow: auto
  vertical-align: top
  height: auto

select,
textarea,
input,
.vclInput
  color: var(--input-color)
  background-color: var(--input-bg-color)
  border-width: var(--input-border-width)
  border-color: var(--input-border-color)
  border-radius: var(--input-border-radius)
  border-style: solid

@import "./placeholder.css"

.vclInput[contenteditable=true]:empty:before
  content: attr(placeholder)
  display: block
  color: var(--input-text-placeholder-color)
  font-style: var(--input-text-placeholder-font-style)

input[disabled],
select[disabled],
textarea[disabled],
.vclInput.vclDisabled,
input[readonly],
select[readonly],
textarea[readonly],
.vclInput.vclReadonly
  color: var(--input-disabled-color)
  background-color: var(--input-disabled-bg-color)
  border-color: var(--input-disabled-border-color)
  cursor: default

select:focus,
textarea:focus,
input:focus,
.vclInput:focus,
.vclInput.vclFocused
  background-color: var(--input-bg-color)
  border: var(--input-border-width) solid var(--input-border-focus-color)

input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly]
  background-color: transparent

/* Semantic coloring */

textarea.vclError,
input.vclError,
.vclInput.vclError,
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid,
input:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus
  border-color: var(--error-medium-color)

textarea.vclWarning,
.vclInput.vclWarning,
input.vclWarning
  border-color: var(--warning-medium-color)

textarea.vclSuccess,
.vclInput.vclSuccess,
input.vclSuccess
  border-color: var(--success-medium-color)

textarea.vclSelected,
textarea.vclSelected:hover,
textarea.vclSelected:active,
textarea.vclSelected:focus,
.vclInput.vclSelected,
.vclInput.vclSelected:hover,
.vclInput.vclSelected:active,
.vclInput.vclSelected:focus,
input.vclSelected,
input.vclSelected:hover,
input.vclSelected:active,
input.vclSelected:focus
  border-color: var(--input-border-focus-color)
  background-color: var(--input-bg-focus-color)