.primitive-example[data-example=modal],.primitive-example:has(>recipe-modal){align-content:flex-start;align-items:flex-start;min-height:18rem}:is([data-example=modal],recipe-modal) :where([data-origin]){gap:var(--space-3);flex-direction:column;width:min(100%,22rem);display:flex}:is([data-example=modal],recipe-modal) :where([data-list] li){justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}:is([data-example=modal],recipe-modal) :where([data-empty]:not([hidden])){justify-content:space-between;align-items:center;gap:var(--space-3);margin:0;display:flex}:is([data-example=modal],recipe-modal) :where([data-layer]:not([hidden])){z-index:2;padding:var(--space-3);border-radius:inherit;background:color-mix(in srgb, var(--on-surface) 50%, transparent);place-items:center;display:grid;position:absolute;inset:0}:is([data-example=modal],recipe-modal) :where([data-dialog]){box-sizing:border-box;gap:var(--space-2);width:min(100%,22rem);padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-container);background:var(--surface);color:var(--on-surface);flex-direction:column;display:flex}:is([data-example=modal],recipe-modal) :where([data-dialog]>*){margin:0}:is([data-example=modal],recipe-modal) :where([data-dialog] h3){font-size:1rem}:is([data-example=modal],recipe-modal) :where([data-actions]){justify-content:flex-end;gap:var(--space-2);flex-wrap:wrap;margin-block-start:var(--space-2);display:flex}:is([data-example=modal],recipe-modal) :where([data-confirm]){background:var(--primary);color:var(--on-primary)}