/**
 * @file “常规输入控件”的样式
 */
@input-with-color-class: ~'@{icecream-prefix}-input-with-color';
@input-with-color-focused-class: ~'@{input-with-color-class}-focused';
@input-with-color-disabled-class: ~'@{input-with-color-class}-disabled';
@input-with-size-class: ~'@{icecream-prefix}-input-with-size';

.@{input-with-color-class} {
  border: 1px solid @icecream-color-grey-7;
  border-radius: @icecream-border-radius;
  outline: none;
  background-color: @icecream-white;

  &.@{input-with-color-focused-class}, &:hover, &:focus {
    border-color: @icecream-primary-color;
  }

  &.@{input-with-color-disabled-class} {
    cursor: not-allowed;
    color: @icecream-color-grey-7;

    input {
      // 脑残 safari https://stackoverflow.com/questions/262158/disabled-input-text-color
      -webkit-text-fill-color: @icecream-color-grey-7;
      opacity: 1;
    }

    background-color: @icecream-color-grey-3;
    &.@{input-with-color-focused-class}, &:hover, &:focus {
      border-color: @icecream-color-grey-7;
    }
  }

  &-validate-status-success {
    border-color: @icecream-success-color;
    &.@{input-with-color-focused-class}, &:hover, &:focus {
      border-color: @icecream-success-color;
    }
  }

  &-validate-status-error {
    border-color: @icecream-error-color;
    &.@{input-with-color-focused-class}, &:hover, &:focus {
      border-color: @icecream-error-color;
    }
  }
}

.sizeOf(@line-height, @font-size) {
  @content-line-height: getIcecreamLineHeightByPx(@font-size);
  @padding-y: (@line-height - @content-line-height) / 2 - 1px;
  @padding-x: @icecream-gap-sm - 1px;
  padding: @padding-y @padding-x;
  .setFontSize(@font-size);

  textarea& {
    min-height: @line-height;
  }
}

.@{input-with-size-class} {
  &-size-large, &-size-default, &-size-small {
    width: 320px;
    &.@{input-with-size-class}-layout-inline {
      width: 240px;
    }
  }

  &-size-small {
    .sizeOf(@icecream-form-input-height-sm, @icecream-font-size-sm);
  }

  &-size-default {
    .sizeOf(@icecream-form-input-height-md, @icecream-font-size-md);
  }

  &-size-large {
    .sizeOf(@icecream-form-input-height-lg, @icecream-font-size-md);
  }
}