@import '../../style/theme/default.less';

@input-prefix-cls: ~'@{kui-prefix}-input';

.@{input-prefix-cls} {
  display: block;
  width: 100%;
  height: 76px;
  padding: 0 30px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
  color: @text-color;
  touch-action: manipulation;
  background-color: rgba(246, 246, 246, 1);
  border-radius: 8px;
  -webkit-appearance: none;

  &-wrapper {
    position: relative;
    display: inline-block;
  }

  &-clear-icon {
    position: absolute;
    top: 50%;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 100%;
    font-size: 30px;
    color: #ccc;
    opacity: 0;
    transition: opacity 0.15s;
    transform: translateY(-50%);

    &-show {
      opacity: 1;
    }
  }

  &-clear-input {
    padding-right: 70px;
  }
}