:root{--white:#fff;--green:#4caf50;--blue:#2896f3;--yellow:#fbc107;--red:#f55153;--transition-duration:0.35s;--toast-duration:3000ms}.toast__panel-wrapper *,.toast__panel-wrapper :after,.toast__panel-wrapper :before{box-sizing:border-box;margin:0;padding:0}.toast__panel-container{color:var(--white);display:flex;flex-direction:column;font-size:62.5%;padding:2.4rem;position:fixed;right:0;top:28%;z-index:1}.toast__panel-container .notification.danger{align-items:center;animation:toast-opening var(--transition-duration) ease-in-out forwards;background-color:var(--red);border-radius:.8rem;display:flex;justify-content:space-between;margin-bottom:.7rem;opacity:0;overflow-x:hidden;overflow-y:hidden;padding:1.2rem;position:relative;transform:translateX(100%)}.toast__panel-container .notification.danger:not(.active){animation-duration:.35s;animation-name:toast-closing}.t-icon{margin-right:.6rem}.t-icon svg{fill:var(--white);height:2.4rem;width:2.4rem}.t-message{color:var(--white);font-size:clamp(.8rem,1vw,1rem);margin-right:1.4rem}.t-close{cursor:pointer}.t-close svg{fill:var(--white);height:1.8rem;opacity:1;transition:opacity var(--transition-duration);width:1.8rem}.t-close:hover svg{opacity:1}.toast__panel-container .t-progress-bar{animation:progress-bar-animation linear forwards var(--toast-duration);background-color:hsla(0,0%,100%,.5);border-radius:0 0 0 .5rem;bottom:0;display:block;height:6px;left:0;position:absolute;transform-origin:left;width:100%}@media screen and (max-width:450px){.toast__panel-container{font-size:50.5%;padding:.6rem}.t-icon{margin-right:.3rem}.t-icon svg{height:1.6rem;width:1.6rem}.t-close svg{height:.9rem;width:.9rem}.t-message{margin-right:.6rem}}@keyframes toast-opening{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes toast-closing{0%{opacity:1;transform:translateX(0)}75%{max-height:15rem;opacity:0;padding:2.4rem;transform:translateX(100%)}to{max-height:0;padding:0;transform:translateX(100%)}}@keyframes progress-bar-animation{to{transform:scaleX(0)}}