@charset "utf-8";

.x-input {
  display: flex;
  height: 90px;
  width: 100%;
  &--multi {
    height: 30 * 1.5 * 3 + 40 + px; // 默认3行
  }
  .x-input__ipt {
    font-size: 30px;
    display: block;
    flex: 1;
    width: 100%;
    height: 100%;
    line-height: 1.5;
    color: #333;
    padding: 20px;
    border: 2px solid #e6e6e6; /*no*/
    border-radius: 5px;
    background: #fff;
    font-weight: normal;
    transition: all 0.1s ease-out;
    &::-webkit-input-placeholder {
      color: #b4b4b4;
    }
    &:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    &:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    &:focus {
      border: 2px solid #00bb55; /*no*/
      position: relative;
      z-index: 2;
      box-shadow: 0 0 10px rgba(0, 187, 85, 0.3);
    }
  }
  &--disabled {
    .x-input__ipt {
      background: #e6e6e6 + 20;
    }
  }
  &.x-input--error {
    .x-input__ipt {
      border: 2px solid #ff6600; /*no*/
      box-shadow: 0 0 10px rgba(255, 102, 0, 0.3);
    }
  }
  &__addon-before, &__addon-after {
    display: flex;
    align-items: center;
    height: 100%;
    background: #fff;
    border: 2px solid #e6e6e6; /*no*/
    border-radius: 5px;
    font-size: 30px;
    > * {
      display: block;
      padding: 0 20px;
      height: 100%;
      display: flex;
      align-items: center;
    }
  }
  &__addon-before {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  &__addon-after {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}