// ----- CONFIG: $UI.TextInput

$this = merge({
  caretColor: $UI.colors.mainText,
  borderWidth: 1,
  borderColor: $UI.colors.darkLighter,
  iconColor: $UI.colors.dark
  heights: {
    s: 3u,
    m: 4u,
    l: 5u
  },
  fontSizes: {
    s: 1.75u,
    m: 1.75u,
    l: 2u
  },
  lineHeights: {
    s: 2.5u,
    m: 2.5u,
    l: 3u
  },
  placeholderTextColor: $UI.colors.darkLighter
}, $UI.TextInput, true)

// ----- COMPONENT

$inputBg = $UI.colors.white
$inputBorderColor = $this.borderColor
$inputBgDisabled = $UI.colors.darkLightest
$inputBorderWidth = 1px
$inputCaretColor = $this.caretColor
$inputTextColor = $UI.colors.mainText
$inputIconColor = $this.iconColor
$focusedColor = $UI.colors.primary
$errorColor = $UI.colors.attention

.input-input
  margin 0 // important for safari
  flex-grow 1 // important for multiline
  flex-shrink 1
  // padding-top, padding-bottom is important
  // for android because it has invisible paddings
  // on the web is important for textarea (override default paddings)
  padding-left 1u
  padding-right @padding-left
  color $inputTextColor
  background-color $inputBg
  border-width $inputBorderWidth
  border-style solid
  border-color $inputBorderColor
  min-width 8u
  radius()
  fontFamily('normal')

  +web()
    outline 0
    caret-color $inputCaretColor

  &.s
    font-size $this.fontSizes.s

  &.m
    font-size $this.fontSizes.m

  &.l
    font-size $this.fontSizes.l

  &.disabled
    background-color $inputBgDisabled

    +web()
      cursor default

  &.focused
    border-color $focusedColor

  &.error
    border-color $errorColor

  for side in (left right)
    &.icon-{side}
      &.l
        padding-{side} 5u

      &.m
        padding-{side} 4u

      &.s
        padding-{side} 4u

.input-icon
  position absolute
  top 0
  bottom 0
  justify-content center
  z-index 1
  color $inputIconColor

  &.left
    left 1u

  &.right
    right 1u

// ----- JS EXPORTS

:export
  config: $this