@layer design-system.components{.vds-toaster{--toast-width:var(--vds-toast-width,26.25rem);--toast-viewport-margin:var(--vds-space-8,2rem);--toast-offset-inline:var(--vds-toast-offset-inline,var(--vds-space-6,1.5rem));--toast-offset-block:var(--vds-toast-offset-block,var(--vds-space-6,1.5rem));--toast-gap:var(--vds-toast-gap,var(--vds-space-4,1rem));--toast-min-height:var(--vds-toast-min-height,4rem);--toast-min-height-with-actions:5rem;--toast-surface:var(--vds-overlay-bg,var(--vds-color-surface,#fff));--toast-border-width:1px;--toast-border-color:var(--vds-surface-border,var(--vds-color-border-muted,#e5e7eb));--toast-border-color-stacked:var(--vds-color-border,#d1d5db);--toast-surface-stacked:color-mix(in oklch, var(--toast-surface) 96%, var(--vds-color-bg-muted,#f3f4f6));--toast-radius-base:var(--vds-toast-radius,var(--vds-radius-toast,.75rem));--toast-radius-compact:var(--vds-radius-toast-compact,max(0px, calc(var(--toast-radius-base) - 2px)));--toast-radius:var(--toast-radius-base);--toast-shadow:var(--vds-overlay-shadow,var(--vds-toast-shadow,0 10px 38px -10px oklch(0% none none/.28), 0 10px 20px -15px oklch(0% none none/.18)));--toast-shadow-hover:var(--vds-overlay-shadow,var(--vds-toast-shadow-hover,0 10px 38px -10px oklch(0% none none/.28), 0 10px 20px -15px oklch(0% none none/.18), 0 8px 30px -8px oklch(0% none none/.3)));--toast-padding-inline:var(--vds-space-5,1.25rem);--toast-padding-block:var(--vds-space-4,1rem);--toast-content-gap:var(--vds-cluster-gap,var(--vds-space-3,.75rem));--toast-text-gap:var(--vds-label-gap,var(--vds-space-1,.25rem));--toast-icon-size:1.25rem;--toast-icon-optical-nudge:1px;--toast-close-size:var(--vds-size-2xs,1.5rem);--toast-actions-gap:var(--vds-cluster-gap,var(--vds-space-2,.5rem));--toast-actions-margin-block-start:var(--vds-cluster-gap,var(--vds-space-2,.5rem));--toast-action-gap:var(--vds-space-1-5,.375rem);--toast-action-padding-inline:var(--vds-space-3,.75rem);--toast-action-padding-block:var(--vds-space-1,.25rem);--toast-action-min-block-size:1.75rem;--toast-action-radius:var(--vds-radius-toast-action,var(--vds-radius-element,.5rem));--toast-progress-track-opacity:.2;--toast-progress-indicator-opacity:.75;--toast-focus-ring-width:var(--vds-focus-ring-width,2px);--toast-focus-ring-offset:var(--vds-focus-ring-offset,2px);--toast-focus-ring-color:var(--vds-color-ring,#6366f1);--toast-ease:var(--vds-toast-ease,var(--vds-ease-ios,cubic-bezier(.32, .72, 0, 1)));--toast-duration:var(--vds-toast-duration,var(--vds-duration-slower,.4s));--toast-enter-distance:var(--vds-toast-enter-distance,32px);--toast-exit-distance:var(--vds-toast-exit-distance,48px)}@media (width<=48rem){.vds-toaster{--toast-width:100%;--toast-offset-inline:var(--vds-space-4,1rem);--toast-offset-block:var(--vds-space-4,1rem)}}@media (width<=30rem){.vds-toaster{--toast-offset-inline:var(--vds-space-3,.75rem);--toast-offset-block:var(--vds-space-3,.75rem);--toast-enter-distance:24px;--toast-exit-distance:36px;--toast-radius:var(--toast-radius-compact);--toast-min-height:3.5rem;--toast-min-height-with-actions:auto;--toast-padding-inline:var(--vds-space-3-5,.875rem);--toast-padding-block:var(--vds-space-3,.75rem);--toast-content-gap:var(--vds-space-2-5,.625rem);--toast-icon-size:1rem;--toast-close-size:1.25rem;--toast-actions-gap:var(--vds-space-1-5,.375rem);--toast-actions-margin-block-start:var(--vds-space-2-5,.625rem);--toast-action-min-block-size:2.25rem}}.vds-toaster{z-index:var(--vds-z-toast);inline-size:min(var(--toast-width), calc(100vw - var(--toast-viewport-margin)));pointer-events:none;outline:none;margin:0;padding:0;list-style:none;display:block;position:fixed}.vds-toaster--top-left{inset-block-start:calc(var(--toast-offset-block) + env(safe-area-inset-top,0px));inset-inline-start:calc(var(--toast-offset-inline) + env(safe-area-inset-left,0px))}.vds-toaster--top-right{inset-block-start:calc(var(--toast-offset-block) + env(safe-area-inset-top,0px));inset-inline-end:calc(var(--toast-offset-inline) + env(safe-area-inset-right,0px))}.vds-toaster--top-center{inset-block-start:calc(var(--toast-offset-block) + env(safe-area-inset-top,0px));inset-inline-start:50%;transform:translate(-50%)}.vds-toaster--bottom-left{inset-block-end:calc(var(--toast-offset-block) + env(safe-area-inset-bottom,0px));inset-inline-start:calc(var(--toast-offset-inline) + env(safe-area-inset-left,0px))}.vds-toaster--bottom-right{inset-block-end:calc(var(--toast-offset-block) + env(safe-area-inset-bottom,0px));inset-inline-end:calc(var(--toast-offset-inline) + env(safe-area-inset-right,0px))}.vds-toaster--bottom-center{inset-block-end:calc(var(--toast-offset-block) + env(safe-area-inset-bottom,0px));inset-inline-start:50%;transform:translate(-50%)}:is(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .vds-toaster--top-center,:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .vds-toaster--bottom-center){transform:translate(50%)}.vds-toast{background:var(--toast-surface);border:var(--toast-border-width) solid var(--toast-border-color);border-radius:var(--toast-radius);box-shadow:var(--toast-shadow);min-block-size:var(--toast-min-height);pointer-events:auto;-webkit-user-select:none;user-select:none;cursor:grab;touch-action:pan-y;transform:translate3d(var(--vds-toast-drag-x,0px), var(--vds-toast-y,0px), 0) scale(var(--vds-toast-scale,1));opacity:var(--vds-toast-opacity,1);will-change:transform, opacity;transition:transform var(--toast-duration) var(--toast-ease), opacity var(--vds-duration-slow) var(--vds-ease-out), box-shadow var(--vds-duration-slow) var(--vds-ease-out);position:absolute;inset-block-start:0;inset-inline:0;overflow:hidden}.vds-toaster[data-position^=bottom] .vds-toast{inset-block:auto 0}.vds-toast[data-state=open]{animation:vds-toast-enter-top var(--vds-duration-slow) var(--vds-ease-ios)}.vds-toaster[data-position^=bottom] .vds-toast[data-state=open]{animation-name:vds-toast-enter-bottom}.vds-toast[data-state=open][data-index="0"][data-type=error]{animation-name:vds-toast-enter-top-shake}.vds-toaster[data-position^=bottom] .vds-toast[data-state=open][data-index="0"][data-type=error]{animation-name:vds-toast-enter-bottom-shake}.vds-toast[data-state=closed]{animation:vds-toast-exit-top var(--vds-duration-normal) var(--vds-ease-in) forwards;pointer-events:none}.vds-toaster[data-position^=bottom] .vds-toast[data-state=closed]:not([data-swipe-exit]){animation-name:vds-toast-exit-bottom}.vds-toast[data-state=closed][data-swipe-exit=left]{animation:vds-toast-swipe-out-left var(--vds-duration-normal) var(--vds-ease-out) forwards}.vds-toast[data-state=closed][data-swipe-exit=right]{animation:vds-toast-swipe-out-right var(--vds-duration-normal) var(--vds-ease-out) forwards}.vds-toast[data-dragging]{cursor:grabbing;transition:none;animation:none}.vds-toast--stacked{background:var(--toast-surface-stacked);border-color:var(--toast-border-color-stacked)}.vds-toast--has-actions{min-block-size:var(--toast-min-height-with-actions)}@media (hover:hover){.vds-toast[data-index="0"]:hover{box-shadow:var(--toast-shadow-hover)}}.vds-toaster[data-expanded] .vds-toast--stacked{background:var(--toast-surface);border-color:var(--toast-border-color)}.vds-toast:active{cursor:grabbing}.vds-toast:focus-visible{outline:var(--toast-focus-ring-width) solid var(--toast-focus-ring-color);outline-offset:var(--toast-focus-ring-offset)}.vds-toast__content{align-items:flex-start;gap:var(--toast-content-gap);padding-block:var(--toast-padding-block);padding-inline:var(--toast-padding-inline);display:flex;position:relative}.vds-toast__icon{inline-size:var(--toast-icon-size);block-size:var(--toast-icon-size);flex-shrink:0;justify-content:center;align-items:center;margin-block-start:var(--toast-icon-optical-nudge);display:inline-flex}.vds-toast__icon>svg{inline-size:var(--toast-icon-size);block-size:var(--toast-icon-size)}.vds-toast__text{gap:var(--toast-text-gap);flex-direction:column;flex:1;min-inline-size:0;display:flex}.vds-toast__title{font-family:var(--vds-font-sans);font-size:var(--vds-text-sm);font-weight:var(--vds-font-weight-semibold);line-height:var(--vds-leading-snug);color:var(--vds-color-text);word-break:break-word;margin:0}.vds-toast__description{font-family:var(--vds-font-sans);font-size:var(--vds-text-xs);line-height:var(--vds-leading-normal);color:var(--vds-color-text-muted);word-break:break-word;margin:0}.vds-toast__actions{align-items:center;gap:var(--toast-actions-gap);flex-wrap:wrap;margin-block-start:var(--toast-actions-margin-block-start);display:flex}.vds-toast__close-container{inline-size:var(--toast-close-size);block-size:var(--toast-close-size);flex-shrink:0;position:relative}.vds-toast__close{border-radius:var(--vds-radius-full);block-size:100%;inline-size:100%;color:var(--vds-color-text-subtle);cursor:pointer;transition:background-color var(--vds-duration-fast) var(--vds-ease-out), color var(--vds-duration-fast) var(--vds-ease-out), transform var(--vds-duration-fast) var(--vds-ease-out);z-index:2;background:0 0;border:0;justify-content:center;align-items:center;display:inline-flex;position:absolute;inset:0}.vds-toast__close:hover{background-color:var(--vds-color-bg-muted);color:var(--vds-color-text);transform:scale(1.05)}.vds-toast__close:active{transform:scale(.92)}.vds-toast__close:focus-visible{outline:var(--toast-focus-ring-width) solid var(--toast-focus-ring-color);outline-offset:var(--toast-focus-ring-offset)}.vds-toast__progress-ring{pointer-events:none;z-index:1;color:currentColor;position:absolute;inset:0}.vds-toast__progress-ring-bg{stroke:currentColor;opacity:var(--toast-progress-track-opacity)}.vds-toast__progress-ring-progress{stroke:currentColor;opacity:var(--toast-progress-indicator-opacity);transition:stroke-dashoffset var(--vds-duration-fast) linear}.vds-toast-action{justify-content:center;align-items:center;gap:var(--toast-action-gap);min-block-size:var(--toast-action-min-block-size);padding-inline:var(--toast-action-padding-inline);padding-block:var(--toast-action-padding-block);font-family:var(--vds-font-sans);font-size:var(--vds-text-xs);font-weight:var(--vds-font-weight-medium);border-radius:var(--toast-action-radius);color:var(--vds-color-text);cursor:pointer;touch-action:manipulation;transition:background-color var(--vds-duration-fast) var(--vds-ease-out), color var(--vds-duration-fast) var(--vds-ease-out), border-color var(--vds-duration-fast) var(--vds-ease-out), transform var(--vds-duration-fast) var(--vds-ease-out);background:0 0;border:1px solid #0000;line-height:1;display:inline-flex}.vds-toast-action:hover{transform:translateY(-1px)}.vds-toast-action:active{transform:translateY(0)scale(.97)}.vds-toast-action:focus-visible{outline:var(--toast-focus-ring-width) solid var(--toast-focus-ring-color);outline-offset:var(--toast-focus-ring-offset)}.vds-toast-action--primary{background:var(--vds-color-primary-solid);color:var(--vds-color-on-primary);border-color:var(--vds-color-primary-solid)}.vds-toast-action--primary:hover{background:var(--vds-color-primary-solid-hover,var(--vds-color-primary-solid))}.vds-toast-action--secondary{background:var(--vds-color-bg-muted);color:var(--vds-color-text);border-color:var(--vds-color-border)}.vds-toast-action--secondary:hover{background:var(--vds-color-surface-hover)}.vds-toast-action--ghost{color:var(--vds-color-text-muted);background:0 0}.vds-toast-action--ghost:hover{background:var(--vds-color-bg-muted);color:var(--vds-color-text)}.vds-toast-action--danger{background:var(--vds-color-danger-solid);color:var(--vds-color-on-danger);border-color:var(--vds-color-danger-solid)}.vds-toast-action--danger:hover{background:var(--vds-color-danger-solid-hover,var(--vds-color-danger-solid))}.vds-toast-action--success{background:var(--vds-color-success-solid);color:var(--vds-color-on-success);border-color:var(--vds-color-success-solid)}.vds-toast-action--success:hover{background:var(--vds-color-success-solid-hover,var(--vds-color-success-solid))}.vds-toast--success{border-color:var(--vds-color-success-bg)}.vds-toast--success .vds-toast__icon{color:var(--vds-color-success-solid)}.vds-toast--error{border-color:var(--vds-color-danger-bg)}.vds-toast--error .vds-toast__icon{color:var(--vds-color-danger-solid)}.vds-toast--warning{border-color:var(--vds-color-warning-bg)}.vds-toast--warning .vds-toast__icon{color:var(--vds-color-warning-solid)}.vds-toast--info{border-color:var(--vds-color-info-bg)}.vds-toast--info .vds-toast__icon{color:var(--vds-color-info-solid)}.vds-toast--loading{border-color:var(--vds-color-primary-bg)}.vds-toast--loading .vds-toast__icon{color:var(--vds-color-primary-solid)}.vds-toast--default .vds-toast__icon{color:var(--vds-color-text-muted)}.vds-toast--success .vds-toast__progress-ring{color:var(--vds-color-success-solid)}.vds-toast--error .vds-toast__progress-ring{color:var(--vds-color-danger-solid)}.vds-toast--warning .vds-toast__progress-ring{color:var(--vds-color-warning-solid)}.vds-toast--info .vds-toast__progress-ring{color:var(--vds-color-info-solid)}.vds-toast--loading .vds-toast__progress-ring{color:var(--vds-color-primary-solid)}.vds-toast[data-type=loading] .vds-toast__icon>svg,.vds-toast[data-index="0"][data-state=open][data-type=loading] .vds-toast__icon>svg{animation:1s linear infinite vds-toast-spin}.vds-toast[data-index="0"][data-state=open][data-type=success] .vds-toast__icon>svg,.vds-toast[data-index="0"][data-state=open][data-type=default] .vds-toast__icon>svg{animation:vds-toast-icon-fade var(--vds-duration-normal) var(--vds-ease-out) 40ms both}.vds-toast[data-index="0"][data-state=open][data-type=error] .vds-toast__icon>svg{animation:vds-toast-icon-shake var(--vds-duration-normal) var(--vds-ease-out) 40ms both}.vds-toast[data-index="0"][data-state=open][data-type=warning] .vds-toast__icon>svg{animation:vds-toast-icon-pulse var(--vds-duration-normal) var(--vds-ease-out) 40ms both}.vds-toast[data-index="0"][data-state=open][data-type=info] .vds-toast__icon>svg{animation:vds-toast-icon-slide var(--vds-duration-normal) var(--vds-ease-out) 40ms both}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .vds-toast[data-index="0"][data-state=open][data-type=info] .vds-toast__icon>svg{animation-name:vds-toast-icon-slide-rtl}@keyframes vds-toast-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes vds-toast-enter-top{0%{transform:translate3d(0, calc(-1 * var(--toast-enter-distance)), 0) scale(.94);opacity:0}to{transform:translate3d(var(--vds-toast-drag-x,0px), var(--vds-toast-y,0px), 0) scale(var(--vds-toast-scale,1));opacity:var(--vds-toast-opacity,1)}}@keyframes vds-toast-enter-bottom{0%{transform:translate3d(0, var(--toast-enter-distance), 0) scale(.94);opacity:0}to{transform:translate3d(var(--vds-toast-drag-x,0px), var(--vds-toast-y,0px), 0) scale(var(--vds-toast-scale,1));opacity:var(--vds-toast-opacity,1)}}@keyframes vds-toast-enter-top-shake{0%{transform:translate3d(0, calc(-1 * var(--toast-enter-distance)), 0) scale(.94);opacity:0}55%{transform:translate3d(-3px, var(--vds-toast-y,0px), 0) scale(var(--vds-toast-scale,1));opacity:1}to{transform:translate3d(var(--vds-toast-drag-x,0px), var(--vds-toast-y,0px), 0) scale(var(--vds-toast-scale,1));opacity:var(--vds-toast-opacity,1)}}@keyframes vds-toast-enter-bottom-shake{0%{transform:translate3d(0, var(--toast-enter-distance), 0) scale(.94);opacity:0}55%{transform:translate3d(-3px, var(--vds-toast-y,0px), 0) scale(var(--vds-toast-scale,1));opacity:1}to{transform:translate3d(var(--vds-toast-drag-x,0px), var(--vds-toast-y,0px), 0) scale(var(--vds-toast-scale,1));opacity:var(--vds-toast-opacity,1)}}@keyframes vds-toast-exit-top{0%{transform:translate3d(0, var(--vds-toast-y,0px), 0) scale(var(--vds-toast-scale,1));opacity:var(--vds-toast-opacity,1)}to{transform:translate3d(0, calc(var(--vds-toast-y,0px) - var(--toast-exit-distance)), 0) scale(.92);opacity:0}}@keyframes vds-toast-exit-bottom{0%{transform:translate3d(0, var(--vds-toast-y,0px), 0) scale(var(--vds-toast-scale,1));opacity:var(--vds-toast-opacity,1)}to{transform:translate3d(0, calc(var(--vds-toast-y,0px) + var(--toast-exit-distance)), 0) scale(.92);opacity:0}}@keyframes vds-toast-swipe-out-left{0%{transform:translate3d(var(--vds-toast-drag-x,0px), var(--vds-toast-y,0px), 0) scale(var(--vds-toast-scale,1));opacity:1}to{transform:translate3d(-120%, var(--vds-toast-y,0px), 0) scale(.9);opacity:0}}@keyframes vds-toast-swipe-out-right{0%{transform:translate3d(var(--vds-toast-drag-x,0px), var(--vds-toast-y,0px), 0) scale(var(--vds-toast-scale,1));opacity:1}to{transform:translate3d(120%, var(--vds-toast-y,0px), 0) scale(.9);opacity:0}}@keyframes vds-toast-icon-fade{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes vds-toast-icon-shake{0%,to{transform:translate(0)}25%{transform:translate(-1.5px)}75%{transform:translate(1.5px)}}@keyframes vds-toast-icon-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.9;transform:scale(1.12)}}@keyframes vds-toast-icon-slide{0%{opacity:0;transform:translate(-5px)scale(.95)}to{opacity:1;transform:translate(0)scale(1)}}@keyframes vds-toast-icon-slide-rtl{0%{opacity:0;transform:translate(5px)scale(.95)}to{opacity:1;transform:translate(0)scale(1)}}@media (width<=48rem){.vds-toaster{inline-size:auto;inset-inline:calc(var(--toast-offset-inline) + env(safe-area-inset-left,0px)) calc(var(--toast-offset-inline) + env(safe-area-inset-right,0px))}.vds-toaster--top-center,.vds-toaster--bottom-center{padding-inline:var(--toast-offset-inline);inset-inline:0;transform:none}}@media (width<=30rem){.vds-toast__title{font-size:var(--vds-text-sm);line-height:var(--vds-leading-tight)}.vds-toast__description{font-size:var(--vds-text-xs);line-height:var(--vds-leading-snug)}.vds-toast__actions{flex-direction:column;align-items:stretch}.vds-toast-action{inline-size:100%;font-size:var(--vds-text-xs)}.vds-toaster:not([data-expanded]) .vds-toast--stacked{background:var(--toast-surface);border-color:var(--toast-border-color)}}@media (hover:none){.vds-toaster:hover{pointer-events:none}}@media (prefers-reduced-motion:reduce){.vds-toast,.vds-toast[data-state],.vds-toast[data-swipe-exit],.vds-toast__icon>svg,.vds-toast__progress-ring-progress{transition-duration:1ms!important;animation-duration:1ms!important;animation-delay:0s!important}}}
