.toast{row-gap:calc(.5 * var(--rhythmic-unit));font-size:var(--font-size-small);background:var(--color-surface);border:var(--border);border-inline-start:4px solid var(--color-text-secondary);padding:calc(.75 * var(--rhythmic-unit)) var(--rhythmic-unit);border-radius:var(--border-radius-small);pointer-events:auto;opacity:1;min-width:300px;max-width:400px;transition:var(--transition) opacity, var(--transition) transform, var(--transition-mode) border-inline-start-color;view-transition-name:match-element;grid-template-columns:1fr;display:grid;transform:translate(0);box-shadow:0 5px 15px #00000026;&:has(.toast__close){grid-template-columns:1fr min-content}}.toast--removing{opacity:0;pointer-events:none}.toast__close{appearance:none;width:calc(1.25 * var(--rhythmic-unit));height:calc(1.25 * var(--rhythmic-unit));font-size:22px;line-height:calc(1.25 * var(--rhythmic-unit));cursor:pointer;color:var(--color-text-secondary);transition:var(--transition-mode) color;background:0 0;border:none;grid-area:1/2/-1;padding:0;font-weight:700;&:hover,&:focus-visible,&:active{color:var(--color-text)}}.toast__container{top:calc(1.25 * var(--rhythmic-unit));right:calc(1.25 * var(--rhythmic-unit));gap:calc(.5 * var(--rhythmic-unit));z-index:9999;pointer-events:none;flex-direction:column;display:flex;position:fixed}@media not (prefers-reduced-motion:reduce){::view-transition-old{animation:ease-out slide-out}::view-transition-new{animation:ease-out slide-in}}@keyframes slide-out{to{opacity:0;transform:translate(100%)}}@keyframes slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@starting-style{.toast{opacity:0;transition:var(--transition) opacity, var(--transition) transform;transform:translate(100%)}}.toast--success{border-left-color:var(--color-brand);& .toast__header{color:var(--color-brand)}}.toast--error{border-left-color:var(--color-error);& .toast__header{color:var(--color-error)}}.toast__header{justify-content:space-between;font-weight:700;display:flex}.toast__body{color:var(--color-text);font-size:var(--font-size-smaller);font-optical-sizing:auto;font-variation-settings:"wdth" 95;font-weight:440}@media (width<=600px){.toast-container{padding:calc(1.25 * var(--rhythmic-unit));align-items:center;top:0;left:0;right:0}.toast{width:100%;min-width:auto}}@media (prefers-reduced-motion:reduce){.toast{animation:none}}