@primer/css/dist/toasts.css

The CSS implementation of GitHub's Primer Design System

.Toast{display:flex;margin:var(--base-size-8);color:var(--fgColor-default, var(--color-fg-default));background-color:var(--bgColor-default, var(--color-canvas-default));border-radius:6px;box-shadow:inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)),var(--shadow-floating-legacy, var(--color-overlay-shadow))}@media(min-width: 544px){.Toast{width:max-content;max-width:450px;margin:var(--base-size-16)}}.Toast-icon{display:flex;align-items:center;justify-content:center;width:calc(var(--base-size-16)*3);flex-shrink:0;color:var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));background-color:var(--bgColor-accent-emphasis, var(--color-accent-emphasis));border:1px solid rgba(0,0,0,0);border-right:0;border-top-left-radius:inherit;border-bottom-left-radius:inherit}.Toast-content{padding:var(--base-size-16)}.Toast-dismissButton{max-height:54px;padding:var(--base-size-16);color:inherit;background-color:rgba(0,0,0,0);border:0}.Toast-dismissButton:hover{opacity:.7}.Toast-dismissButton:active{opacity:.5}.Toast--loading{color:var(--fgColor-default, var(--color-fg-default));box-shadow:inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)),var(--shadow-floating-legacy, var(--color-overlay-shadow))}.Toast--loading .Toast-icon{background-color:var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis))}.Toast--error{color:var(--fgColor-default, var(--color-fg-default));box-shadow:inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)),var(--shadow-floating-legacy, var(--color-overlay-shadow))}.Toast--error .Toast-icon{background-color:var(--bgColor-danger-emphasis, var(--color-danger-emphasis))}.Toast--warning{color:var(--fgColor-default, var(--color-fg-default));box-shadow:inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)),var(--shadow-floating-legacy, var(--color-overlay-shadow))}.Toast--warning .Toast-icon{background-color:var(--bgColor-attention-emphasis, var(--color-attention-emphasis))}.Toast--success{color:var(--fgColor-default, var(--color-fg-default));box-shadow:inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)),var(--shadow-floating-legacy, var(--color-overlay-shadow))}.Toast--success .Toast-icon{background-color:var(--bgColor-success-emphasis, var(--color-success-emphasis))}.Toast--animateIn{animation:Toast--animateIn .18s cubic-bezier(0.22, 0.61, 0.36, 1) backwards}@keyframes Toast--animateIn{0%{opacity:0;transform:translateY(100%)}}.Toast--animateOut{animation:Toast--animateOut .18s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards}@keyframes Toast--animateOut{100%{pointer-events:none;opacity:0;transform:translateY(100%)}}.Toast--spinner{animation:Toast--spinner 1000ms linear infinite}@keyframes Toast--spinner{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/*# sourceMappingURL=toasts.css.map */