.callout.svelte-hz4bpy{--callout-color: var(--color-action);--callout-bg: var(--color-action-bg);--_pad-y: 1rem;--_pad-x: 1.25rem;--_gap: .75rem;--_accent-bar-margin: -.25rem;display:grid;grid-template-rows:0fr;border-radius:var(--radius-lg);@supports (corner-shape: squircle){corner-shape:squircle;border-radius:calc(var(--radius-lg) * var(--squircle-ratio, 2))}background:var(--callout-bg);opacity:0;transform:scale(.98);transition:grid-template-rows .3s ease,opacity .3s ease,transform .3s ease;&.visible{grid-template-rows:1fr;opacity:1;transform:scale(1)}&.success{--callout-color: var(--color-success);--callout-bg: var(--color-success-bg)}&.warning{--callout-color: var(--color-warning);--callout-bg: var(--color-warning-bg)}&.error{--callout-color: var(--color-error);--callout-bg: var(--color-error-bg)}&.tip{--callout-color: var(--color-action);--callout-bg: color-mix(in oklch, var(--color-action) 10%, transparent)}&.banner{border-radius:0;width:100%;background:var(--callout-color);color:#fff;transform:none;opacity:0;translate:0 -100%;&.visible{opacity:1;translate:0 0}.inner:where(.svelte-hz4bpy){justify-content:center;&:before{content:none}}.icon:where(.svelte-hz4bpy){color:#fff}.title:where(.svelte-hz4bpy){color:#fff}.body:where(.svelte-hz4bpy){color:#ffffffe6}}&.sticky{position:sticky;top:0;z-index:var(--layer-sticky)}&.dense{--_pad-y: .5rem;--_pad-x: .75rem;--_gap: .5rem;--_accent-bar-margin: 0;--radius-lg: var(--radius-md)}&.comfortable{--_pad-y: 1.25rem;--_pad-x: 1.75rem;--_gap: 1rem;--_accent-bar-margin: -.5rem}&.skeleton{pointer-events:none;width:min(100%,30rem);--skeleton-bg: color-mix(in oklch, var(--callout-color) 25%, transparent);--skeleton-sheen: color-mix(in oklch, var(--callout-color) 40%, transparent);.content:where(.svelte-hz4bpy){min-width:0;flex:1;display:flex;flex-direction:column}}&.banner.skeleton{--skeleton-bg: rgb(255 255 255 / .25);--skeleton-sheen: rgb(255 255 255 / .35);.skeleton-line.title-skeleton:where(.svelte-hz4bpy){--skeleton-bg: rgb(255 255 255 / .4)}}}.inner.svelte-hz4bpy{display:flex;align-items:flex-start;gap:var(--_gap);padding:var(--_pad-y) var(--_pad-x);overflow:hidden;&:before{content:"";align-self:stretch;flex-shrink:0;width:4px;border-radius:var(--radius-full);background:var(--callout-color);margin-left:calc(var(--_gap) - var(--_pad-x));margin-top:var(--_accent-bar-margin);margin-bottom:var(--_accent-bar-margin)}}.icon.svelte-hz4bpy{flex-shrink:0;color:var(--callout-color);display:flex;align-items:center;height:1.4em;line-height:1.4em;.visible:where(.svelte-hz4bpy) &{animation:svelte-hz4bpy-icon-bounce .4s ease .15s both}}.content.svelte-hz4bpy{flex:1;min-width:0}.title.svelte-hz4bpy{font-weight:600;color:var(--callout-color);margin-bottom:.25rem;line-height:1.4}.body.svelte-hz4bpy{color:var(--color-text);line-height:1.5;font-size:.9375rem}.action.svelte-hz4bpy{display:flex;align-items:center;flex-shrink:0;margin-left:auto}.dismiss.svelte-hz4bpy{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--callout-color)}.dismiss.svelte-hz4bpy .button{--color-text: var(--callout-color)}.skeleton-line.svelte-hz4bpy{position:relative;overflow:hidden;background:var(--skeleton-bg, rgb(from var(--color-text, #888) r g b / .1));border-radius:var(--radius-full, 1e5px);height:.65625rem;margin:.375rem 0;&:after{content:"";position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(105deg,transparent 25%,var(--skeleton-sheen, rgb(from var(--color-text, #888) r g b / .12)) 50%,transparent 75%);animation:delight-skeleton-shimmer var(--skeleton-duration, 2.4s) ease-in-out infinite;animation-delay:var(--shimmer-delay, 0s)}&.title-skeleton{width:35%;height:.7em;margin:.35em 0 calc(.35em + .25rem);--skeleton-bg: color-mix(in oklch, var(--callout-color) 35%, transparent)}&.short{width:55%}}@keyframes svelte-hz4bpy-icon-bounce{0%{transform:scale(0);opacity:0}60%{transform:scale(1.2);opacity:1}to{transform:scale(1);opacity:1}}@keyframes delight-skeleton-shimmer{0%{transform:translate(-100%)}55%,to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.callout.svelte-hz4bpy{transition:none;&.banner{translate:none}}.icon.svelte-hz4bpy{.visible:where(.svelte-hz4bpy) &{animation:none}}.skeleton-line.svelte-hz4bpy:after{animation:none}}