@import '../../app.less';

.hard-input {
  background: #fff;
  height: 46px;
  border-radius: 2px;
  padding: 7px 20px;
  line-height: 32px;
  border: 1px solid rgba(200, 209, 218, 1);
  cursor: text;

  .item {
    display: inline-block;
    position: relative;
    line-height: 20px;
    height: 32px;
    padding: 6px;
    margin-right: 10px;
    background-color: rgba(228, 234, 244, 1);

    .text {
      display: inline-block;
      color: #050930;
      vertical-align: top;
      margin-left: 5px;
    }

    .icon {
      width: 16px;
      height: 16px;
      display: inline-block;
      vertical-align: top;
      margin-top: 2px;
      margin-left: 10px;
      background-image: url('/assets/del_icon.png');
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  .item.show.true {
    background-color: rgba(23, 165, 27, 0.06);

    .icon {
      background-image: url('/assets/right_icon.png');
    }
  }

  .item.show.false {
    background-color: rgba(253, 247, 247, 1);

    .icon {
      background-image: url('/assets/wrong_icon.png');
    }
  }

  .other-item {
    display: inline-block;
    position: relative;
    line-height: 20px;
    height: 32px;
    padding: 6px;
    margin-right: 10px;
    background-color: rgba(23, 165, 27, 0.06);

    .text {
      display: inline-block;
      color: #17A51B;
      vertical-align: top;
      margin-left: 5px;
    }
  }
}

.hard-input.focus {
  background: rgba(244, 249, 254, 1);
  border-left: 4px solid rgba(66, 146, 240, 1);
}