@import (reference) './variable.less';

@inputItemPrefix: ant-input;
.@{inputItemPrefix} {
  display: flex;
  align-items: center;
  background: @COLOR_CARD;
  &-disabled {
    opacity: 0.4;
  }
  &-line {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  &-prefix {
    color: @COLOR_TEXT_WEAK;
    font-size: 34 * @rpx;
    margin: 0 8 * @rpx 0 8 * @rpx;
    &:empty {
      display: none;
    }
  }
  &-suffix {
    color: @COLOR_TEXT_WEAK;
    font-size: 34 * @rpx;
    margin: 0 8 * @rpx 0 8 * @rpx;
    &:empty {
      display: none;
    }
  }
  &-content {
    width: 100%;
    align-self: center;
    padding: 0;
    font-size: 34 * @rpx;
    text-align: left;
    color: @input-item-color;
    background: @COLOR_CARD;
  }

  &-clear {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 16 * @rpx;
    margin-left: 8 * @rpx;
    &-icon {
      color: @COLOR_TEXT_WEAK;
      font-size: 34 * @rpx;
    }
  }

  &-clear-show {
    opacity: 1;
  }
  &-clear-hidden {
    opacity: 0;
    pointer-events: none;
  }
  &-placeholder {
    font-size: 34 * @rpx;
    color: @input-item-placeholder-color;
    margin-left: -6 * @rpx;
  }
}