@import '../common/style/index.less';

@input-name-text-color: @text-level-1-color;
@input-text-color: @text-level-1-color;
@input-placeholder-text-color: @text-placeholder-color;
@input-disabled-text-color: @text-level-1-color;
@input-icon-color: @text-level-4-color;
@input-error-text-color: #e34d59;
@input-suffix-text-color: @text-level-1-color;
@input-border-color: #e7e7e7;

@input-font-size: 32rpx;
@input-icon-font-size: 32rpx;
@input-error-msg-font-size: @font-size-s;
@input-vertical-padding: 24rpx;
@input-horizontal-padding: 32rpx;
@input-name-horizontal-margin: 32rpx;
@input-border-padding-left: 32rpx;

.@{prefix}-input--bordered {
  &::after {
    .hairline-bottom(@input-border-color);
    left: @input-border-padding-left;
  }
}
.@{prefix}-input {
  position: relative;
  display: flex;
  padding: @input-vertical-padding @input-horizontal-padding;
  background: @bg-color-block;

  &__name {
    width: 164rpx;
    margin-right: @input-name-horizontal-margin;
    flex: none;
  }

  &__icon {
    &-wrap,
    &--prefix,
    &--suffix {
      display: flex;
      align-items: center;
    }

    &--prefix {
      margin-right: 8rpx;
    }
  }

  &__content {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: @input-font-size;
  }

  &__wrap {
    display: flex;
    flex-wrap: wrap;
    flex: auto;

    &--suffix,
    &--icon {
      flex: 0 0 auto;
      margin-left: @spacer-1;
      color: @input-icon-color;
      font-size: @input-icon-font-size;

      &:empty {
        display: none;
      }
    }

    &--suffix {
      position: relative;
      padding-left: 24rpx;

      &::after {
        .hairline-left();
      }
    }

    &--suffix-text {
      position: relative;
      padding-left: 24rpx;
      color: @input-name-text-color;
    }
  }

  &__control {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0; // for flex-shrink in field__button
    margin: 0;
    padding: 0;
    color: @input-text-color;
    line-height: inherit;
    text-align: left;
    background-color: transparent;
    border: 0;
    resize: none;
    font-size: inherit;

    &::placeholder {
      color: @input-placeholder-text-color;
    }

    &:disabled {
      color: @input-disabled-text-color;
      background-color: transparent;
      cursor: not-allowed;
      opacity: 1;
      -webkit-text-fill-color: currentColor; // fix disabled color in iOS
    }

    &:read-only {
      cursor: default;
    }

    &--right {
      text-align: right;
    }

    &--center {
      text-align: center;
    }
  }

  &__placeholder {
    color: @input-placeholder-text-color;
  }
}

.@{prefix}-input.@{prefix}-is-error {
  align-items: flex-start;

  .@{prefix}-input {
    &__control {
      color: @input-error-text-color;

      &::placeholder {
        color: @input-error-text-color;
      }
    }

    &__placeholder {
      color: @input-error-text-color;
    }

    &__error-msg {
      text-align: left;
      padding-top: @spacer-1;
      font-size: @input-error-msg-font-size;
      line-height: 1;
      color: @input-placeholder-text-color;
      width: 100%;
    }
  }
}

.@{prefix}-input--size-medium {
  padding-top: 32rpx;
  padding-bottom: 33rpx;
}
.@{prefix}-input--size-small {
  padding-top: 24rpx;
  padding-bottom: 24rpx;
}