/**
 * Form input utilities for forms.css
 *
 * Reusable base utilities applied to form elements via @apply in forms.css.
 * These expose the form theme tokens (--form-py, --form-px, etc.) as composable utilities,
 * allowing direct use on custom form elements outside the default selector scope.
 */

@utility form-input-field {
    appearance: none;
    padding-block: var(--form-py);
    padding-inline: var(--form-px);
    border-radius: var(--form-radius);
    border-width: 1px;
    border-color: var(--form-stroke);
    background-color: var(--form-bg);
    color: var(--form-color);
}

@utility form-input-control {
    appearance: none;
    flex-shrink: 0;
    display: inline-block;
    block-size: --spacing(4);
    inline-size: --spacing(4);
    padding: 0;
    border-width: 2px;
    border-color: var(--form-stroke);
    background-color: var(--form-bg);
    color: var(--form-color);
    background-origin: border-box;
    vertical-align: middle;
    user-select: none;
    print-color-adjust: exact;
}