@layer components{.bf-form-group{gap:var(--bf-space-1);padding:var(--bf-space-3);border:var(--bf-border-width) solid var(--bf-border);border-radius:var(--bf-radius);transition:border-color var(--bf-transition), background-color var(--bf-transition);display:grid}.bf-form-group:has(:is(input,select,textarea):user-invalid),.bf-form-group:has([aria-invalid=true]){border-color:var(--bf-danger);background:var(--bf-danger-subtle)}.bf-form-group:has(:is(input,select,textarea):user-valid),.bf-form-group:has([aria-invalid=false]){border-color:var(--bf-success)}.bf-form-group:has(:is(input,select,textarea):user-invalid,[aria-invalid=true]):has(:is(input,select,textarea):user-valid,[aria-invalid=false]){border-color:var(--bf-danger);background:var(--bf-danger-subtle)}.bf-error-text{color:var(--bf-danger);opacity:0;transition:opacity var(--bf-transition), display var(--bf-transition) allow-discrete;font-size:.8125rem;display:none}.bf-form-group:has(:is(input,select,textarea):user-invalid) .bf-error-text,.bf-form-group:has([aria-invalid=true]) .bf-error-text{opacity:1;display:block}@starting-style{.bf-form-group:has(:is(input,select,textarea):user-invalid) .bf-error-text,.bf-form-group:has([aria-invalid=true]) .bf-error-text{opacity:0}}@supports not (transition-behavior:allow-discrete){.bf-form-group:has(:is(input,select,textarea):user-invalid) .bf-error-text,.bf-form-group:has([aria-invalid=true]) .bf-error-text{animation:bf-error-in var(--bf-transition) ease-out}@keyframes bf-error-in{0%{opacity:0;transform:translateY(-2px)}}}@media (forced-colors:active){.bf-form-group:has(:is(input,select,textarea):user-invalid),.bf-form-group:has([aria-invalid=true]){border-style:dashed}}}