.a-text-input
  +text-block(1em 1.4, block)
  background-color: var(--input-background)
  width: 100%
  padding: .5rem
  border: solid 1px var(--input-border)
  border-radius: .25rem
  transition: border-color .2s ease-in, background-color .2s ease-in, box-shadow .2s ease-in
  +media-breakpoint-up(md)
    font-size: .875rem
  +media-breakpoint-down(sm)
    font-size: 1rem
  .field_with_errors &
    border-color: #e1a7b6
    background-color: #fefafb
  &:hover
    background-color: var(--input-hover-background)
    border-color: var(--input-hover-border)
  &:focus
    background-color: var(--input-focus-background)
    border-color: var(--input-focus-border)
    box-shadow: var(--input-focus-shadow)
  &:disabled,
  &[readonly]
    color: var(--muted-text)
    background-color: var(--background)
    pointer-events: none
  &.is-stripe
    box-shadow: none
    padding-top: .625rem
  &.is-inputed
    border: none
    padding: 0
    background-color: transparent

input[type=date].a-text-input,
input[type=month].a-text-input,
input[type=week].a-text-input
  position: relative
  &::-webkit-inner-spin-button
    -webkit-appearance: none
  &::-webkit-clear-button
    +position(relative, 1)
  &::-webkit-calendar-picker-indicator
    color: transparent
    background-color: transparent
    +position(absolute, left 0, right 0, top 0, bottom 0)
    +size(100%)
    cursor: pointer
    opacity: 0

textarea.a-text-input
  line-height: 1.5
  min-height: 10rem
  overflow: hidden
  &.is-xs
    min-height: 6rem
  &.is-sm
    min-height: 10rem
  &.is-md
    min-height: 16rem
  &.has-max-height
    max-height: 70vh
    overflow: auto
