@import '../bootstrap'
@import '../theme'

/* Theme */
v-input($material)
  &:not(.v-input--is-disabled)
    input,
    textarea
      color: $material.text.primary

  input::placeholder,
  textarea::placeholder
    color: $material.text.disabled

  &--is-disabled
    .v-label,
    input,
    textarea
      color: $material.text.disabled

theme(v-input, "v-input")

.v-input
  align-items: flex-start
  display: flex
  flex: 1 1 auto
  font-size: 16px
  text-align: left

  .v-progress-linear
    top: calc(100% - 1px)
    left: 0
    margin: 0
    position: absolute

  input
    max-height: 32px

  input,
  textarea
    // Remove Firefox red outline
    &:invalid
      box-shadow: none

    &:focus,
    &:active
      outline: none

  .v-label
    height: 20px
    line-height: 20px

  &__append-outer,
  &__prepend-outer
    display: inline-flex
    margin-bottom: 4px
    margin-top: 4px
    line-height: 1

    .v-icon
      user-select: none

  &__append-outer
    margin-left: 9px

  &__prepend-outer
    margin-right: 9px

  &__control
    display: flex
    flex-direction: column
    height: auto
    flex-grow: 1
    flex-wrap: wrap
    width: 100% // For IE11

  &__icon
    align-items: center
    display: inline-flex
    height: 24px
    flex: 1 0 auto
    justify-content: center
    min-width: 24px
    width: 24px

    &--clear
      border-radius: 50%

  &__slot
    align-items: center
    color: inherit
    display: flex
    margin-bottom: 8px
    min-height: inherit
    position: relative
    transition: $primary-transition
    width: 100%

  &--is-disabled:not(.v-input--is-readonly)
    pointer-events: none

  &--is-loading > .v-input__control > .v-input__slot
    &:before,
    &:after
      display: none

  &--hide-details > .v-input__control > .v-input__slot
    margin-bottom: 0

  &--has-state
    &.error--text .v-label
      animation: shake .6s $transition.swing