.kbq-form-field {
    --kbq-form-field-size-height: var(--kbq-size-3xl);

    --kbq-form-field-size-border-width: var(--kbq-size-border-width);
    --kbq-form-field-size-border-radius: var(--kbq-size-border-radius);
    --kbq-form-field-size-focus-outline-width: 1px;

    --kbq-form-field-size-icon-size: var(--kbq-size-l);
    --kbq-form-field-size-icon-margin-left: var(--kbq-size-s);
    --kbq-form-field-size-icon-margin-right: var(--kbq-size-s);
    --kbq-form-field-size-icon-button-size: var(--kbq-size-xxl);
    --kbq-form-field-size-icon-button-margin-left: var(--kbq-size-xxs);

    --kbq-form-field-hint-size-margin-top: var(--kbq-size-xs);
    --kbq-form-field-hint-size-gap: var(--kbq-size-xxs);

    --kbq-form-field-size-container-vertical-padding: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));
    --kbq-form-field-size-container-left-padding: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));
    --kbq-form-field-size-container-right-padding: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));
    --kbq-form-field-size-infix-left-padding: var(--kbq-size-xs);
    --kbq-form-field-size-infix-right-padding: var(--kbq-size-xxs);

    --kbq-form-field-size-addon-width: 28px;
    /* THEME TOKENS */
    --kbq-form-field-default-border-color: var(--kbq-line-contrast-fade);
    --kbq-form-field-default-background: var(--kbq-background-bg);
    --kbq-form-field-default-placeholder: var(--kbq-foreground-contrast-tertiary);
    --kbq-form-field-default-text: var(--kbq-foreground-contrast);
    --kbq-form-field-states-focused-border-color: var(--kbq-states-line-focus-theme);
    --kbq-form-field-states-focused-background: var(--kbq-background-bg);
    --kbq-form-field-states-focused-placeholder: var(--kbq-foreground-contrast-tertiary);
    --kbq-form-field-states-focused-text: var(--kbq-foreground-contrast);
    --kbq-form-field-states-focused-focus-outline: var(--kbq-states-line-focus-theme);
    --kbq-form-field-states-error-border-color: var(--kbq-line-error);
    --kbq-form-field-states-error-background: var(--kbq-background-error-less);
    --kbq-form-field-states-error-placeholder: var(--kbq-foreground-error-tertiary);
    --kbq-form-field-states-error-text: var(--kbq-foreground-error);
    --kbq-form-field-states-error-focused-focus-outline: var(--kbq-states-line-focus-error);
    --kbq-form-field-states-autofill-border-color: var(--kbq-states-line-focus-theme);
    --kbq-form-field-states-autofill-background: var(--kbq-background-theme-less);
    --kbq-form-field-states-autofill-placeholder: var(--kbq-foreground-contrast-tertiary);
    --kbq-form-field-states-autofill-text: var(--kbq-foreground-contrast);
    --kbq-form-field-states-disabled-border-color: var(--kbq-states-line-disabled);
    --kbq-form-field-states-disabled-background: var(--kbq-states-background-disabled);
    --kbq-form-field-states-disabled-placeholder: var(--kbq-states-foreground-disabled);
    --kbq-form-field-states-disabled-text: var(--kbq-states-foreground-disabled);
    --kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);
    --kbq-form-field-label-color: var(--kbq-foreground-contrast-secondary);
}

:where(.kbq-dark) {
    --kbq-form-field-states-error-placeholder: var(--kbq-foreground-error-secondary);
}