@layer components{.bf-state{gap:var(--bf-space-2);padding:var(--bf-space-5);border:var(--bf-border-width) solid var(--bf-border);border-radius:var(--bf-radius);background:var(--bf-surface);display:grid}.bf-state>:first-child{margin-block-start:0}.bf-state>:last-child{margin-block-end:0}.bf-state[data-state=empty]{text-align:center;color:var(--bf-muted);border-style:dashed;justify-items:center}.bf-state[data-state=empty] :where(h1,h2,h3,h4,h5,h6){color:var(--bf-text)}.bf-state[data-state=loading],.bf-state[data-state=refreshing],.bf-state[data-state=optimistic],.bf-state[aria-busy=true]{color:var(--bf-muted)}.bf-state[data-state=loading]:before,.bf-state[data-state=refreshing]:before,.bf-state[data-state=optimistic]:before,.bf-state[aria-busy=true]:before{border:2px solid var(--bf-border);border-block-start-color:var(--bf-primary);border-radius:var(--bf-radius-full);content:"";width:1.25rem;height:1.25rem;animation:.8s linear infinite bf-state-spin}.bf-state[data-state=optimistic]{background:var(--bf-surface-alt)}.bf-state[data-state=error],.bf-state[data-state=rolled-back],.bf-error-summary{border-color:var(--bf-danger);background:var(--bf-danger-subtle)}.bf-state[data-state=stale]{color:var(--bf-muted);border-style:dashed}.bf-state[data-state=partial]{border-inline-start:3px solid var(--bf-info);padding-inline-start:var(--bf-space-3)}.bf-state[data-state=fresh],.bf-state[data-state=confirmed]{border-color:var(--bf-success);background:var(--bf-success-subtle)}.bf-state[aria-busy=true][data-state=empty]{text-align:start;border-style:solid;justify-items:stretch}.bf-error-summary{padding:var(--bf-space-3);border:var(--bf-border-width) solid var(--bf-danger);border-radius:var(--bf-radius);color:var(--bf-text)}@keyframes bf-state-spin{to{transform:rotate(360deg)}}.bf-state[hidden],.bf-empty-state[hidden]{display:none}.bf-empty-state{align-content:center;justify-items:center;gap:var(--bf-space-2);padding:var(--bf-space-8) var(--bf-space-5);text-align:center;color:var(--bf-muted);background:var(--bf-surface);border:var(--bf-border-width) dashed var(--bf-border);border-radius:var(--bf-radius-lg);block-size:100%;min-block-size:0;display:grid}.bf-empty-state>:where(:first-child){font-size:var(--bf-type-xl);line-height:1}.bf-empty-state :where(h1,h2,h3,h4,h5,h6){color:var(--bf-text);margin-block:0}.bf-empty-state p{max-width:40ch;margin-block:0}.bf-empty-state>:where(.bf-row,button,a){margin-block-start:var(--bf-space-3)}@media (prefers-reduced-motion:reduce){.bf-state[data-state=loading]:before,.bf-state[data-state=refreshing]:before,.bf-state[data-state=optimistic]:before,.bf-state[aria-busy=true]:before{animation:none}}@media (forced-colors:active){.bf-state[data-state=error],.bf-state[data-state=rolled-back],.bf-state[data-state=stale],.bf-error-summary{border-style:dashed}}}