

@mixin textInput($initColor, $height:30px) {
  @include boxSizing(border-box);
  @include placeholder(#999);
  border: 1px solid $initColor;
  font-size: 12px;
  color: #000000;
  padding: 0 10px;
  height: $height;
  border-radius: 2px;
  background-color: #ffffff;
  &:hover {
    border: 1px solid $colorNormal;
    //color: #989A9C;
  }
  &:focus {
    background: $colorWhite;
    border: 1px solid #666666; //$colorNormal;
    -webkit-box-shadow: 0 0 0 2px rgba(34, 153, 255, .2);
    box-shadow: 0 0 0 2px rgba(34, 153, 255, .2);
  }
  &.cd-error {
    border: 1px solid #E2231A; //$inputErrorColor;
    -webkit-box-shadow: 0 0 0 2px rgba(226, 35, 26, 0.20);
    box-shadow: 0 0 0 2px rgba(226, 35, 26, 0.20);

    @include placeholder($colorBrand);

    &:focus {
        @include placeholder(#999);
    }
  }
  &.cd-disable {
    border-color: $initColor;
    color: $inputDisableColor;
    background-color: $colorTableExpand;
    -webkit-box-shadow: 0 0 0 0 !important;
    box-shadow: 0 0 0 0 !important;
  }
}

.cd-text-input {
  @include textInput($inputColor);
}

.cd-text-search-input {
  @include textInput($inputSearchColor);
}

input::-webkit-input-placeholder {
  color: #999999;
}

input:-moz-placeholder {
  color: #999999;
  opacity: 1;
}

input:-ms-input-placeholder {
  color: #999999;
}
