{"version":3,"file":"async.css.cjs","names":[],"sources":["../../../src/feedback/async/async.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_color: var(--async-color, var(--color-contrast-500));\n    --_icon-size: var(--async-icon-size, var(--size-12));\n    --_gap: var(--async-gap, var(--size-3));\n\n    display: block;\n  }\n\n  /* ── Status regions ─────────────────────────────────────────────── */\n\n  /* All regions always exist in the shadow DOM; only one is visible at a time. */\n  .region {\n    display: none;\n  }\n\n  :host([status='idle']) .region-idle,\n  :host([status='loading']) .region-loading,\n  :host([status='empty']) .region-empty,\n  :host([status='error']) .region-error,\n  :host([status='success']) .region-success,\n  :host(:not([status])) .region-success {\n    display: block;\n  }\n\n  /* ── Empty state ─────────────────────────────────────────────────── */\n\n  .empty-state {\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-10) var(--size-6);\n    color: var(--_color);\n    text-align: center;\n  }\n\n  .empty-state .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    opacity: 0.4;\n  }\n\n  .empty-state .icon svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  .empty-state .icon ore-icon {\n    display: flex;\n    width: 100%;\n    height: 100%;\n  }\n\n  .empty-state .title {\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-700);\n  }\n\n  .empty-state .description {\n    max-width: 28ch;\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n    opacity: 0.75;\n  }\n\n  /* ── Error state ─────────────────────────────────────────────────── */\n\n  .error-state {\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-10) var(--size-6);\n    color: var(--color-error-600);\n    text-align: center;\n  }\n\n  .error-state .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    opacity: 0.7;\n  }\n\n  .error-state .icon svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  .error-state .icon ore-icon {\n    display: flex;\n    width: 100%;\n    height: 100%;\n  }\n\n  .error-state .title {\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-error-700);\n  }\n\n  .error-state .description {\n    max-width: 32ch;\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n    opacity: 0.85;\n  }\n\n  .error-state .retry-btn {\n    display: inline-flex;\n    gap: var(--size-1-5);\n    align-items: center;\n    padding: var(--size-2) var(--size-4);\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-error-700);\n    cursor: pointer;\n    background: none;\n    border: 1px solid currentcolor;\n    border-radius: var(--rounded-md);\n    transition: var(--_motion-transition, background var(--transition-fast), opacity var(--transition-fast));\n  }\n\n  .error-state .retry-btn ore-icon {\n    flex: none;\n  }\n\n  .error-state .retry-btn:hover {\n    background: color-mix(in oklch, var(--color-error-500) 10%, transparent);\n  }\n\n  .error-state .retry-btn:focus-visible {\n    outline: 2px solid var(--color-error-500);\n    outline-offset: 2px;\n  }\n\n  /* ── Loading (fallback skeleton block) ───────────────────────────── */\n\n  .loading-default {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    padding: var(--size-4);\n  }\n}\n"],"mappings":""}