@charset "utf-8";

.toast_wrap { display: none; position: fixed; top: 50%; left: 50%; width: 86%; z-index: 1001; transform: translate3d(-50%, -50%, 0); pointer-events: none; }
.toast_wrap.top { top: 70px; transform: translate3d(-50%, 0, 0); }
.toast_wrap.bottom { top: auto; bottom: 80px; transform: translate3d(-50%, 0, 0); }
.toast_wrap.on,
.toast_wrap.close { display: block; }
.toast_wrap .toast_inner { text-align: center; transition: transform .25s ease; }
.toast_wrap .toast_contents { display: inline-flex; align-items: center; justify-content: center; text-align: left; min-width: 250px; padding: 12px 28px; background: rgba(0, 0, 0, .8); border-radius: 28.5px; font-size: 14px; color:  var(--G_0, #FCFCFC); }
.toast_wrap.on .toast_contents { animation: toastOpen .15s ease both; }
.toast_wrap.close .toast_contents { animation: toastClose .125s ease both; }
.toast_wrap .toast_msg { max-width: 100%; }

.toast_wrap.info .toast_contents { background: rgba(15, 15, 15, 0.60); backdrop-filter: blur(15px); }
.toast_wrap.warn .toast_contents { background: rgba(200, 36, 0, .7); }
.toast_wrap.error .toast_contents { background: rgba(2, 120, 0, .4); }
.toast_wrap .toast_icon { flex: 0 0 auto; display: none; width: 24px; height: 24px; margin: 0 10px 0 -12px; background: no-repeat center / contain; }
.toast_wrap.info .toast_icon { display: inline-flex; background-image: url('../Assets/Icons/toast_icon_info.svg'); }
.toast_wrap.warn .toast_icon { display: inline-flex; background-image: url('../Assets/Icons/toast_icon_warn.svg'); }
.toast_wrap.error .toast_icon { display: inline-flex; background-image: url('../Assets/Icons/toast_icon_error.svg'); }

@keyframes toastOpen {
    0% { opacity: 0; transform: scale(0.925); }
    100% { opacity: 1; transform: scale(1); } 
}

@keyframes toastClose {
    0% { opacity: 1; transform: scale(1) translate3d(0, 0, 0); }
    100% { opacity: 0; transform: scale(0.8) translate3d(0, -4px, 0); }
}