@import '../variables/all';
@import '../mixins/all';

.text-input {
  display: inline-block;
  vertical-align: middle;

  > input {
    @include control-base;
    width: 100%;
    -webkit-font-smoothing: antialiased;

    &:focus,
    &:hover {
      border-color: $control-active-border-color;
    }
    .form-field-error & {
      border-color: $lipstick;
    }
  }

  &.disabled > input {
    @include disabled;
  }
}

.text-input--sm {
  > input {
    @include control-sm;
  }
}

.text-input--lg {
  > input {
    @include control-lg;
  }
}

.text-input--fluid {
  width: 100%;
}

.icon-input {
  position: relative;
  display: inline-block;

  i {
    width: 25px;
    height: 100%;
    @include display-flex;
    @include align-items(center);
    position: absolute;
    top: 0;
    right: 12px;
    color: $black;
    opacity: .5;
    transition: opacity ease .3s;
  }

  &.icon-input--right {
    i {
      @include justify-content(flex-end);
      right: 12px;
    }

    .text-input {
      > input {
        padding-right: 34px;
      }
    }
  }

  &.icon-input--left {
    i {
      @include justify-content(flex-start);
      left: 12px;
      top: 0;
    }

    .text-input {
      > input {
        padding-left: 34px;
      }
    }
  }
}

.icon-input--focused {
  i {
    opacity: 1 !important;
  }
}

.icon-input--fluid {
  width: 100%;
}