@import './var.less';
@import '../../cell/style/var.less';

:root {
  --rv-field-input-error-text-color: @field-input-error-text-color;
  --rv-field-label-width: @field-label-width;
  --rv-field-label-color: @field-label-color;
  --rv-field-label-margin-right: @field-label-margin-right;
  --rv-field-icon-size: @field-icon-size;
  --rv-field-right-icon-color: @field-right-icon-color;
  --rv-field-error-message-color: @field-error-message-color;
  --rv-field-error-message-font-size: @field-error-message-font-size;
  --rv-field-disabled-text-color: @field-disabled-text-color;
  --rv-field-required-mark-color: @field-required-mark-color;
  --rv-field-intro-color: @field-intro-color;
  --rv-field-tooltip-icon-color: @field-tooltip-icon-color;
}

.@{rv-prefix}-field {
  .@{rv-prefix}-field__label {
    flex: none;
    box-sizing: border-box;
    width: var(--rv-field-label-width);
    margin-right: var(--rv-field-label-margin-right);
    color: var(--rv-field-label-color);
    text-align: left;
    word-wrap: break-word;

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

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

    &--required {
      &::before {
        margin-right: 2 * @hd;
        color: var(--rv-field-required-mark-color);
        content: '*';
      }
    }
  }

  &--error {
    .@{rv-prefix}-input__control,
    .@{rv-prefix}-input__control::placeholder,
    .@{rv-prefix}-textarea__control,
    .@{rv-prefix}-textarea__control::placeholder {
      color: var(--rv-field-input-error-text-color);
      -webkit-text-fill-color: currentColor;
    }
  }

  &--disabled {
    .@{rv-prefix}-field__label {
      color: var(--rv-field-disabled-text-color);
    }
  }

  &__value {
    overflow: visible;

    &--center {
      .@{rv-prefix}-field__children,
      .@{rv-prefix}-field__intro,
      .@{rv-prefix}-field__error-message {
        justify-content: center;
        text-align: center;
      }
      .@{rv-prefix}-input,
      .@{rv-prefix}-textarea {
        text-align: center;
      }
    }

    &--right {
      .@{rv-prefix}-field__children,
      .@{rv-prefix}-field__intro,
      .@{rv-prefix}-field__error-message {
        justify-content: flex-end;
        text-align: right;
      }
      .@{rv-prefix}-input,
      .@{rv-prefix}-textarea {
        text-align: right;
      }
    }
  }

  &__body {
    display: flex;
    align-items: center;
  }

  &__children {
    display: flex;
    align-items: center;
    text-align: left;
    min-height: var(--rv-cell-line-height);
  }

  &__control-wrapper {
    width: 100%;
    flex: 1;
  }

  &__icon,
  &__suffix,
  &__right-icon {
    flex-shrink: 0;
  }

  &__right-icon {
    margin-right: calc(var(--rv-padding-xs) * -1);
    padding: 0 var(--rv-padding-xs);
    box-sizing: content-box;
  }

  &__left-icon .@{rv-prefix}-icon,
  &__right-icon .@{rv-prefix}-icon {
    display: block;
    font-size: var(--rv-field-icon-size);
    line-height: inherit;
  }

  &__left-icon {
    margin-right: var(--rv-padding-base);
  }

  &__right-icon {
    color: var(--rv-field-right-icon-color);
  }

  &__prefix {
    padding-right: var(--rv-padding-xs);
  }

  &__suffix {
    padding-left: var(--rv-padding-xs);
  }

  &__error-message {
    color: var(--rv-field-error-message-color);
    font-size: var(--rv-field-error-message-font-size);
    line-height: 1.4em;
    display: flex;
    justify-content: flex-start;
    text-align: left;
  }

  &__tooltip {
    display: inline-block;
    margin-left: 2 * @hd;
    color: var(--rv-field-intro-color);
    font-weight: bold;
    vertical-align: middle;
  }

  &__intro {
    color: var(--rv-field-intro-color);
    font-size: var(--rv-field-error-message-font-size);
    line-height: 1.4em;
    text-align: left;
    display: flex;
    justify-content: flex-start;
  }
}