:root {
  --alert-danger-color: #df1d3c;
  --alert-success-color: #2db24a;
  --input-error-color: #ff7188;
}

.form-control {
  --border-radius: 8px;
  background-color: var(--grey-shade-11);
  border-radius: var(--border-radius);
  border: 1px solid var(--grey-shade-5);
  color: var(--title-color);
  font-size: var(--fs-15);
  line-height: 24px;
  padding: 11px 16px;
  transition: background 0.15s ease;
  resize: none;
  width: 100%;
}
.form-control:hover {
  border-color: #d8dce6;
}
.form-control:focus {
  background-color: transparent;
  border-color: #bfc3cf;
}
.form-group {
  display: flex;
  flex-direction: column;
  min-width: 0px;
}
.form-group label {
  color: var(--title-color);
  font-size: var(--fs-13);
  line-height: var(--fs-13-line-height);
  margin-bottom: var(--g1);
}
.form-group label:has(+ label.error) {
  margin-bottom: 0;
}
.form-group:is(.has-error, .error) *:is(input, textarea) {
  background-color: transparent;
  border-color: var(--input-error-color);
}
.form-group:is(.has-error, .error) label.error {
  color: var(--input-error-color);
}

.alert {
  --alert-color: var(--text-color);
  background-color: color-mix(in oklab, var(--alert-color) 12%, transparent);
  border-radius: 6px;
  border: 1px solid color-mix(in oklab, var(--alert-color) 24%, transparent);
  color: var(--alert-color);
  padding: 16px 20px;
}

.alert-danger {
  --alert-color: var(--alert-danger-color);
}

.alert-success {
  --alert-color: var(--alert-success-color);
}