@layer components{@layer dialog{:root{--dialog-section-inline:var(--echo-spacing-400);--dialog-section-gap:var(--echo-spacing-400);--dialog-content-padding:var(--echo-spacing-400);--dialog-focus-safe-space:calc(var(--echo-focus-ring-width) + var(--echo-focus-ring-offset))}[data-slot=dialog-overlay]{z-index:var(--echo-z-modal);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:#171f2cad;position:fixed;inset:0}[data-slot=dialog-overlay][data-state=open]{animation:.2s ease-out dialog-fade-in}[data-slot=dialog-overlay][data-state=closed]{animation:.15s ease-in forwards dialog-fade-out}[data-slot=dialog-content]{z-index:var(--echo-z-modal);width:90vw;min-width:min(18rem, calc(100% - var(--echo-spacing-700)));max-width:calc(100% - var(--echo-spacing-700));gap:var(--echo-spacing-300);padding:var(--dialog-content-padding);border:1px solid var(--border);background-color:var(--background);box-shadow:var(--echo-shadow-2xl);border-radius:1.25rem;display:grid;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}@media (min-width:1024px){[data-slot=dialog-content]{width:fit-content}}[data-slot=dialog-content][data-max-width=sm]{max-width:min(20rem, calc(100% - var(--echo-spacing-700)))}[data-slot=dialog-content][data-max-width=md]{max-width:min(28rem, calc(100% - var(--echo-spacing-700)))}[data-slot=dialog-content][data-max-width=lg]{max-width:min(36rem, calc(100% - var(--echo-spacing-700)))}[data-slot=dialog-content][data-max-width=xl]{max-width:min(48rem, calc(100% - var(--echo-spacing-700)))}[data-slot=dialog-content][data-state=open]{animation:.25s ease-out dialog-content-in}[data-slot=dialog-content][data-state=closed]{animation:.18s ease-in forwards dialog-content-out}[data-color-scheme=dark] [data-slot=dialog-content]{background-color:var(--card);border-color:var(--border)}[data-slot=dialog-content] [data-slot=dialog-close]{top:var(--dialog-content-padding);right:var(--dialog-content-padding);border-radius:var(--echo-radius-sm);width:2rem;height:2rem;color:var(--muted-foreground);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex;position:absolute}[data-slot=dialog-content] [data-slot=dialog-close] [data-icon]{width:1rem;height:1rem}[data-slot=dialog-content] [data-slot=dialog-close]:hover{color:var(--foreground);background-color:color-mix(in srgb, var(--accent) 88%, transparent)}[data-slot=dialog-content] [data-slot=dialog-close]:focus-visible{outline:var(--echo-focus-ring);outline-offset:var(--echo-focus-ring-offset)}[data-slot=dialog-content] [data-slot=dialog-header]{gap:var(--echo-spacing-50);margin:0;padding-inline-end:calc(2rem + var(--echo-spacing-300));display:grid}[data-slot=dialog-content] [data-slot=dialog-header]+:where(form,article,section):not([data-slot=dialog-body]){margin:calc(var(--dialog-focus-safe-space) * -1);padding:var(--dialog-focus-safe-space)}[data-slot=dialog-content]>[data-slot=dialog-body]{gap:var(--dialog-section-gap);min-inline-size:0;margin:calc(var(--dialog-focus-safe-space) * -1);padding:var(--dialog-focus-safe-space);display:grid}[data-slot=dialog-content] [data-slot=dialog-title]{font-size:var(--echo-text-500);font-weight:var(--echo-font-semibold);line-height:var(--echo-leading-snug);color:var(--foreground)}[data-slot=dialog-content] [data-slot=dialog-title][data-tone=destructive]{color:var(--destructive)}[data-slot=dialog-content] [data-slot=dialog-title][data-layout=with-icon],[data-slot=dialog-content] [data-slot=dialog-title][data-tone=destructive]{align-items:center;gap:var(--echo-spacing-200);display:inline-flex}[data-slot=dialog-content] [data-slot=dialog-title] [data-icon]{width:1rem;height:1rem}[data-slot=dialog-content] [data-slot=dialog-description]{font-size:var(--echo-text-300);line-height:var(--echo-leading-snug);color:var(--muted-foreground)}[data-slot=dialog-content] [data-slot=dialog-footer]{gap:var(--echo-spacing-200);flex-wrap:wrap;justify-content:flex-end;margin:0;display:flex}@keyframes dialog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes dialog-fade-out{0%{opacity:1}to{opacity:0}}@keyframes dialog-content-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.96)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes dialog-content-out{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(.96)}}}}
