.toast-card-container { position: fixed; left: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: start; z-index: 100001; } .toast-card { background: #fff; min-width: 240px; max-width: 60vw; min-height: 0; max-height: 0; box-shadow: 0 4px 16px 1px rgba(0,0,0,.3); transition: all .3s cubic-bezier(0, 0.65, 0.58, 1); transform: translateX(-150%); transform-origin: left; overflow: hidden; display: flex; flex-direction: column; border-left-width: 4px; border-left-style: solid; } .toast-card.visible { min-height: 96px; max-height: unset; transform: translateX(0); margin-top: 16px; } .toast-card-header { display: flex; align-items: center; } .toast-card-title { font-size: 18px; color: #000; opacity: 0.5; margin: 16px; font-weight: bold; flex: 1 1 auto; } .toast-card-dismiss { height: 24px; width: 24px; flex: 0 0 auto; padding: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all .2s ease-out; transform-origin: center; opacity: 0.5; } .toast-card-dismiss:hover { transform: scale(1.2); } .toast-card-dismiss:active { transform: scale(1.1); } .toast-card-message { color: #000; font-size: 14px; margin: 16px; margin-top: 0; white-space: pre-wrap; } .toast-card.toast-default { border-left-color: #444; } .toast-card.toast-error { border-left-color: #f44336; } .toast-card.toast-info { border-left-color: #2196F3; } .toast-card.toast-success { border-left-color: #8BC34A; } .toast-card span, .toast-card .link { display: inline-block; padding: 4px 6px; margin: 0 2px; background-color: rgba(0,0,0,.1); text-decoration: none; color: #000; transition: all .2s ease-out; } .toast-card .link:hover { background-color: rgba(0,0,0,.2); } .toast-card .link:active { background-color: rgba(0,0,0,.1); }