/*
 *
 * BUI: INPUT FIELD
 *
 */

$inputFieldHeight: 30px

$BuiActive:   $grey-800
$BuiPassive:  $grey-500
$BuiDisabled: $grey-300
$BuiError:    $red-400

.bui-input-field
  position: relative
  width: 100%
  height: $inputFieldHeight
  font-size: 14px
  font-weight: 400
  line-height: normal

  .input-text-value
    position: relative
    z-index: 2
    width: 100%
    height: calc(100% - 2px)
    input[type=text],
    input[type=password]
      width: 100%
      height: inherit
      outline: none
      background-color: transparent
      border: none
      color: $BuiActive
      font-family: inherit
      font-size: inherit

      &:focus
        outline: none

    textarea
      width: 100%
      height: calc(#{$inputFieldHeight} - 2px)
      outline: 0
      background-color: transparent
      border: none
      color: $BuiActive
      font-family: inherit
      font-size: inherit
      resize: none
      line-height: 20px
      padding-top: 3px
      &.textarea-hidden
        position: absolute
        left: 0
        top: 0
        visibility: hidden
        overflow: hidden

  .input-underlines
    position: absolute
    bottom: 2px
    width: 100%
    .input-underline-blur
      position: absolute
      left: 0
      width: 100%
      border-bottom: 1px solid $BuiPassive
    .input-underline-focus
      position: absolute
      left: 0
      width: 0%
      border-bottom: 2px solid $cyan-500
      @include transition( width .2s ease )

  .input-icon-holder
    position: absolute
    left: 0
    .input-icon
      color: $BuiPassive
      line-height: 26px

  .input-status-icon
    position: absolute
    z-index: 4
    right: 0
    line-height: 26px
    .status-icon
      &.status-default
        display: none
      &.status-loading
        color: $grey-500
      &.status-complete
        color: $green-400


  .input-remove-button
    position: absolute
    z-index: 3
    right: 0
    line-height: 26px
    color: $grey-400
    cursor: pointer
    &:hover
      color: $red-400

  .input-text-hint
    position: absolute
    padding-left: 0
    top: 5px
    left: 0
    color: $BuiPassive
    transform: translateY(0%)
    ms-transform: translateY(0%)
    -webkit-transform: translateY(0%)
    @include transition( all .125s ease-out )

  .input-text-error
    position: absolute
    bottom: -17px
    font-size: 12px
    color: $BuiError

  .input-disable-overlay
    position: absolute
    z-index: 3
    left: 0
    top: 0
    width: 0
    height: $inputFieldHeight

  // Input is textarea
  &.input-is-textarea
    @include transition( height .275s cubic-bezier(.2, 1, .3, 1) )

  // Input has icon
  &.input-has-icon
    .input-text-value
      input,
      textarea
        padding-left: 20px
    .input-text-hint
      left: 20px

  // Input has value
  &.input-has-value
    .input-text-hint
      opacity: 0
      padding-left: 10px
      &.hint-is-floating
        opacity: 1
        padding-left: 0
        font-size: .8em
        transform: translateY(-120%)
        -ms-transform: translateY(-120%)
        -webkit-transform: translateY(-120%)

  // Input is focused
  &.input-is-focused
    .input-underline-focus
      width: 100%
    .input-icon
      color: $cyan-500
    .input-text-hint
      &.hint-is-floating
        opacity: 1
        padding-left: 0
        font-size: .8em
        transform: translateY(-120%)
        -ms-transform: translateY(-120%)
        -webkit-transform: translateY(-120%)

  // Input has error
  &.input-has-error
    .input-icon
      color: $BuiError
    .input-underline-focus
      width: 100%
      border-color: $BuiError

  // Input is disabled
  &.input-is-disabled
    .input-disable-overlay
      width: 100%
    .input-icon,
    .input-text-hint,
    input,
    textarea
      color: $BuiDisabled
    .input-underline-blur
      border-color: $BuiDisabled

  // Input has fast remove
  &.input-has-fast-remove
    .input-text-value
      input,
      textarea
        padding-right: 20px