_inputHeight = 4u
_inputBg = $UI.colors.white
_inputBorderWidth = 1px
_inputBorderColor = $UI.colors.darkLighter
_inputBgDisabled = $UI.colors.darkLightest
_inputPlaceholderColor = $UI.colors.darkLighter
_focusedColor = $UI.colors.primary
_errorColor = $UI.colors.error
_swipeZoneColor = #f5f5f5
_suggestionsPopoverMaxHeight = 25u

.input
  padding 5px 1u
  background-color _inputBg
  border-width _inputBorderWidth
  border-style solid
  border-color _inputBorderColor
  min-height 4u
  min-width 8u
  radius()

  &.disabled
    background-color _inputBgDisabled

  &.focused
    border-color _focusedColor

  &.error
    border-color _errorColor

.placeholder
  color _inputPlaceholderColor

.tag
  margin-right 0.5u

  &.last
    margin-right 0

.row
  padding-right 3u
  width 100%

.suggestions-web
  padding 0 1u
  max-height _suggestionsPopoverMaxHeight

.suggestions-native
  padding 1u 0

.swipeZone
  background-color _swipeZoneColor

.nativeListContent
  padding-top 5u

.suggestion
  cursor pointer
  padding 1u 2u
  flex-direction row
  align-items center
  +desktop()
    padding 1u

.sugText
  color $UI.colors.mainText
  font(h5)

  +desktop()
    font(body2)

.backdropStyle
  // Greater value than @startup/ui's Modal has
  z-index 1501

.popover
  padding 0 .5u
  max-height _suggestionsPopoverMaxHeight
  min-width 20u

.ellipsis
  margin 0 1u

.suggestionItem
  padding 1u 0

.check
  width 2u

.checkIcon
  color $UI.colors.primary

.label
  margin-right 1u
  flex-grow 1