/* TODO: dedupe */
[data-cl-form-control] {
  --form-control-label-color: var(--color-foreground-text-me);
  --form-control-helper-text-color: var(--color-foreground-text-le);
}

[data-cl-form-control-label] {
  display: flex;
  flex-direction: column;
  gap: var(--sp1);
  font-weight: 500;
  color: var(--form-control-label-color);
}

[data-cl-form-control-helper-text],
[data-cl-form-control-error] {
  font-size: var(--fs0);
  margin-block-start: var(--sp2);
}

[data-cl-form-control-helper-text] {
  color: var(--form-control-helper-text-color);
}

[data-cl-form-control-error] {
  color: var(--color-danger-600);
}

/* End inline */


[data-cl-input] {
  --input-background-color: var(--background);
  --input-text-color: var(--color-foreground-text);
  --input-border-color: var(--color-foreground-separator-me);
  --input-placeholder-color: var(--color-foreground-text-le);
  --input-focused-border-color: var(--color-primary-l);
  --input-focused-box-shadow: var(--color-primary-ll) 0 0 0 4px;
  --input-errored-border-color: var(--color-danger-500);
  --input-errored-box-shadow: var(--color-danger-100) 0 0 0 4px;
}

[data-cl-input] {
  box-sizing: border-box;
  margin: 0;
  display: inline-block;
  font-family: inherit;
  font-size: var(--fs3);
  vertical-align: middle;
  border-radius: var(--br2);
  padding: 0 var(--sp3);
  appearance: none;
  outline: 0;
  height: 40px;
  width: 100%;
  border: 1px solid var(--input-border-color);
  background-color: var(--input-background-color);
  color: var(--input-text-color);
}

[data-cl-input]::placeholder {
  color: var(--input-placeholder-color);
}

[data-cl-input]:focus {
  box-shadow: var(--input-focused-box-shadow);
  border-color: var(--input-focused-border-color);
}

[data-cl-input]:disabled,
[data-cl-input][readonly] {
  opacity: 0.6;
  cursor: not-allowed;
}

[data-cl-input][aria-invalid="true"],
[data-cl-input]:not(:focus):not(:placeholder-shown):invalid {
  border-color: var(--input-errored-border-color);
}

[data-cl-input][aria-invalid="true"]:focus {
  box-shadow: var(--input-errored-box-shadow);
  border-color: var(--input-errored-border-color);
}