form.css

/**
 * Shared form styles
 */



/**
 * Input Group
 */
.inputGroup {
  position: relative;
}

/**
 * Default input, textarea and select styling
 */
.formControl {
  margin-bottom: var(--control-margin-bottom);
  border: 1px solid var(--color-border-form);
  color: var(--color-text);
  background-color: var(--color-fill-form-element);
  width: 100%;
  outline: 0;
  letter-spacing: 0.4px;
  border-radius: 0;
  min-height: var(--control-min-size-desktop);
  display: flex;
  align-items: center;

  &:focus,
  &.isFocused {
    border: 1px solid var(--primary);
    box-shadow: inset 0 0 0 2px rgba(37 118 195 / 30%);
  }

  &.fullWidth {
    width: 100%;
  }

  &.noBorder {
    border: 0;
  }

  &.marginBottom0 {
    margin-bottom: 0;
  }

  &:disabled,
  &.isDisabled {
    background-color: #ebebe4;
    color: #777;
    border: 1px solid var(--color-border);
    box-shadow: none;
  }

  /**
   * Feedback styles
   */
  &.hasFeedback {
    margin-bottom: 0.4rem;
  }

  &.hasWarning {
    border-color: var(--warn);
    background-color: oklch(from var(--warn) l c h / 5%);
  }

  &.hasError {
    border-color: var(--error);
    background-color: oklch(from var(--error) l c h / 5%);
  }

  &.isValid {
    border-color: var(--success);
    background-color: oklch(from var(--success) l c h / 5%);
  }

  &.isChanged {
    background-color: oklch(from var(--primary) l c h / 20%);
  }

  &::-ms-clear {
    display: none;
  }
}

/**
 * Feedback block
 */

.feedbackBlock {
  padding: 0 var(--input-vertical-padding);
  font-size: var(--font-size-medium);

  &:last-child {
    margin-bottom: var(--control-margin-bottom);
  }
}

.feedbackError {
  composes: feedbackBlock;
  color: var(--error);
}

.feedbackWarning {
  composes: feedbackBlock;
  color: var(--warn);
}