@import "./base.less";

.@{css-prefix}.input {
  font-size: 1em;
  position: relative;
  font-weight: 400;
  display: flex;
  color: rgba(0,0,0,.87);
  vertical-align: baseline;
  height: 37px;
  
  > i {
    .icon-right;
  }

  &.left {
    > i {
      right: auto;
      left: 1px;
      border-radius: @border-radius 0 0 @border-radius;
    }
    > input {
      padding-left: 2.6em;
    }
  }
  &.right > input {
    padding-right: 2.6em;
  }

  &.transparent input{
    border-color: transparent!important;
    background-color: transparent!important;
    padding: 0!important;
    box-shadow: none!important;
    border-radius: 0!important;
  }

  &.loading >i {
    .loading(1.2em, 0.2em);
  }

  > input, > textarea {
    z-index: 1;
    margin: 0;
    max-width: 100%;
    flex: 1 0 auto;
    outline: 0;
    -webkit-tap-highlight-color: rgba(255,255,255,0);
    text-align: left;
    line-height: @line-height;
    padding: @input-padding;
    background: #fff;
    border: 1px solid @input-border-color;
    //border: 0;
    border-radius: @border-radius;
    transition: box-shadow .1s ease,border-color .1s ease;
    box-shadow: @input-box-shadow;

    &:focus {
      border-color: @input-active-color;
      //box-shadow: 0 0 0 1px rgba(16,142,233,.8);
      color: rgba(0,0,0,.9);
    }

  }


  .label-right {
    .user-select(none);
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 2;
    height: calc(~"100% - 2px");
    border-radius: 0 @border-radius @border-radius 0;
    display: inline-flex;

    > label {
      padding: @input-padding;
      background: #f1f1f1;
      border-left: 1px solid @input-border-color;
      border-radius: 0 @border-radius @border-radius 0;
    }
  }

  .label-left {
    .user-select(none);
    border-radius: @border-radius 0 0 @border-radius;
    display: inline-flex;
    padding: @input-padding;
    background: #f1f1f1;
    border: 1px solid @input-border-color;
    border-right: none;
    
    ~ input {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  // size
  .font-sizes;

  .disabled;

}