@charset 'utf-8'
@import 'colors'

.ui-kit-form-input-container
  position: relative
  margin: 0 0 10px 0
  .ui-kit-form-input-label
    color: $label-color
    font-size: 14px
    display: block
    width: 100%
    margin: 0 0 5px 0
    visibility: hidden
    &.visible
      visibility: visible
  .ui-kit-form-input
    width: 100%
    height: 40px
    background: $input-background
    border: 1px solid $border-color
    border-radius: 3px
    font-size: 13px
    outline: none
    padding: 5px 10px
    color: $input-color
    text-shadow: 0px 0px 0px transparent
    z-index: 10
    ::-webkit-input-placeholder
      color: $grey
    :-moz-placeholder
      color: $grey
    ::-moz-placeholder
      color: $grey  
    :-ms-input-placeholde  
      color: $grey
    &:focus, &.is-active
      border-color: $primary
      background: rgba($primary, 0.15)
      color: $primary
      text-shadow: 0px 0px 0px $primary
      -webkit-text-fill-color: transparent
  &.is-prefixed
    .ui-kit-form-input
      padding-left: 80px
    .ui-kit-form-input-prefix
      display: flex

  &.success
    .ui-kit-form-input
      border-color: $green
      background: rgba($green, 0.15)
      color: $green
      text-shadow: 0px 0px 0px $green
      -webkit-text-fill-color: transparent
    .ui-kit-form-input-prefix
      background: $green
      color: $white
  &.danger
    .ui-kit-form-input
      border-color: $red
      background: rgba($red, 0.15)
      color: $red
      text-shadow: 0px 0px 0px $red !important
      -webkit-text-fill-color: transparent !important
    .ui-kit-form-input-prefix
      background: $red
      color: $white
  &.warning
    .ui-kit-form-input
      border-color: $yellow !important
      background: rgba($yellow, 0.15) !important
      color: $yellow !important
      text-shadow: 0px 0px 0px $yellow !important
      -webkit-text-fill-color: transparent !important
    .ui-kit-form-input-prefix
      background: $yellow !important
      color: $white !important

  i
    display: block
    position: absolute
    width: 25px
    height: 25px
    top: 27px
    right: 5px
    z-index: 99 
    font-size: 25px
    &.ion-ios-checkmark
      color: $green
    &.ion-ios-close
      color: $red
    &.ion-android-alert
      color: $yellow

  .ui-kit-form-input-prefix
    width: 70px
    height: 38px
    background: $grey-medium
    position: absolute
    left: 1px
    top: 24px
    z-index: 9
    color: $input-color
    display: none
    align-items: center
    justify-content: center
    font-weight: bold
    border-top-left-radius: 3px
    border-bottom-left-radius: 3px
    font-size: 13px
    padding-top: -1px
    background: $primary
    color: $white