.input-common{
  display: inline-block;
  color:$input-color;
  font-size:$font-size;
  outline: none;
  text-align: left;
  background:#fff;
  overflow: hidden;
  line-height: $line-height-base;
  vertical-align: middle;
}
.input-base{
  @extend .input-common;
  border:$border-width solid $border-color;
  &::-webkit-input-placeholder {
    color:$sub-color;
  }
  &[disabled],&[readonly]{
    background-color: $disabled-color;
    opacity: 1;
  }
  &.block{
    width:100%;
  }
  &.circle{
    border-radius: $component-size;
  }
}

input[type='text'],
input[type='password'],
input[type='tel'],
input[type='number'],
input[type='email'],
input[type='url'],
input[type='range'],
input[type='search'],
input[type='color'],
.static-text,
select{
  height: $component-size;
  padding: $input-padding;
  @extend .input-base;
}

textarea{
  padding: $input-padding;
  resize: vertical;
  @extend .input-base;
  &.un-resizable{
    resize: none;
  }
}
select{
  background: none;
  box-shadow: none;
  cursor: pointer;
}
.static-text{
  .place-holder{
    color: $sub-color;
  }
}

.input-wrapper{
  position: relative;
  @include inline-flex-align-center;

  &.block{
    @include horizional-flex-align-center;
  }
  .validate-message {
    position: absolute;
    height:$component-size;
    line-height:$component-size;
    top: 0;
    color: $warning-color;
    padding:0 $text-padding;
    @include user-select-none;
    margin-bottom: 0;
    right:$content-padding;
    &:before {
      position: absolute;
      left: -$content-padding;
      margin-top: -$content-padding/2;
      top: 50%;
      width: $content-padding;
      height:$content-padding;
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAABGdBTUEAALGPC/xhBQAAAK5QTFRF/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38q/38qAAAA/38q3Lw2XAAAADl0Uk5T3dxa3g0c8kCxkI6my6WMwuDfxYvEBsOKBVknzKgh66djB4k/iGJYh8oo80lHAz5G2xsM6OEB+QIA8xPoQAAAARBJREFUKM99k+dyhDAMhJ3ek2u5XuHovdjWvv+LBULg4HDYP57RNyPLqzWjP/FQm2VCZLNFyOsaqw5pxGgUG7INdzaQW9HDKXV86w6wdxf4tEe+CupmcpVjH9YwEni+p5bSNwi/gutHvEjqiL/CXZcwsLHldCW+hR0U0ECe1jWg6ZzjSIzHuKU+JBMxZzpGUgXlCDrTcCYVpDM0Noevhj6+WIZEDRNkTOCkht8Qw3Cw7RzR/wMthp6iYyxJITkuTCjsM1WwsE8yOg4YT8E7Dj3ID9iUKyPHRW+dn3CdKiaeuGLpB4RXB8z7Ha+Z08zheq3cFiqimSyXSWQxYONQF15CfdMNdalwOim/w2QaNhf8AHTtn3BhOvydAAAAAElFTkSuQmCC") no-repeat 0 0;
      background-size:$content-padding auto;
      content: "";
    }
  }

  &.large{
    input[type='text'],
    input[type='password'],
    input[type='tel'],
    input[type='number'],
    input[type='email'],
    input[type='url'],
    input[type='range'],
    input[type='search'],
    input[type='color'],
    select,
    .static-text{
      height: $component-size-large;
      padding: 2*$text-padding $text-padding;
    }
    textarea{
      padding: 2*$text-padding $text-padding;
    }
  }

  &.radius{
    >input,
    >.static-text,
    >textarea,
    >select{
      border-radius: $component-size;
    }
  }
  &.radius-small{
    >input,
    >.static-text,
    >textarea,
    >select{
      border-radius: $border-radius;
    }
  }
  &.line{
    &>input,
    >.static-text,
    &>select,
    &>textarea{
      border-color: transparent;
      border-bottom-color: $border-color;
      &:focus{
        border-bottom-color: $primary-color;
      }
    }
    &.focused{
      .input-addon{
        color: $primary-color;
      }
    }
    .input-addon{
      display: block;
      height: $component-size;
      line-height: $component-size;
      border-color:transparent;
      background-color:transparent;
    }
    &.primary{
      &>input,
      >.static-text,
      &>select,
      &>textarea{
        border-bottom-color: $primary-color;
      }
    }
  }
  &>button{
    display: block;
  }
  &>input,
  &>select,
  &>textarea,
  &>.static-text{
    display: block;
    @include flex-adapter;
    color: $content-color;
    &+.input-addon{
      border-right:$border-width solid $border-color;
    }
  }
  &.shadow{
    &:not(.pretty){
      &>input{
        border-color: $border-color;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
      }
    }
  }
  &.pretty{
    &:before{
      position: absolute;
      left: 0;
      bottom: 0;
      display: block;
      content: "";
      width: calc(100% - 0.2rem);
      height: 6px;
      border: $border-width solid $border-color;
      border-top: none;
    }
    input,
    textarea,
    select{
      border-color: transparent;
      border-bottom-color: $border-color;
      background-color: transparent;
    }
    .input-icon{
      color:$border-color;
    }
    .input-addon{
      display: block;
      height:$component-size;
      line-height: $component-size;
      border-color:transparent;
      background-color:transparent;
    }
  }
  .input-addon{
    display: block;
    border-right:none;
  }
  .input-icon {
    position: absolute;
    right: 0;
    top: 50%;
    width:$component-size ;
    height: $component-size;
    margin-top: -$component-size/2;
    font-size:$font-size*1.5;
    text-align: center;
    line-height: $component-size;
    color:$input-color;
    &.front{
      left: 0;
      &+input{
        padding-left: $component-size;
      }
    }
    &.end{
      &+input{
        padding-right: $component-size;
      }
    }
  }
  &.light{
    input,
    textarea,
    select{
      color:#fff;
    }
  }
  &.error,
  &.success,
  &.loading{
    input{
      padding-right: $component-size;
    }
    &:after{
      @extend [class*="icon-"];
      display: block;
      position: absolute;
      text-align: center;
      right:$content-padding;
      top: 50%;
      margin-top: -$font-size;
      font-size: $component-size-small;
      width: $component-size-small;
      height: $component-size-small;
      line-height: $component-size-small;
      opacity: 0.5;
    }
  }
  &.error{
    animation:shake 0.5s !important;
    &:after{
      content:"\e6b8";
      color:$error-color;
      border-color:$error-color;
    }
  }
  &.loading{
    &:after{
      content:"\e611";
      animation: loading 0.6s linear;
      animation-iteration-count: infinite;
      border-color:transparent;
    }
  }
  &.success{
    &:after{
      content:"\e6b1";
      color:$success-color;
      border-color:$success-color;
    }
  }
}