.mu-toaster {
    position: fixed;
    z-index: 1001;
    margin: 20px;
    padding: 10px;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: min(350px, 100%);
}
.mu-toast {
    --bg: white;
    background: var(--bg);
    color: rgba(var(--col));
    pointer-events: initial;
    box-shadow: 0 0 10px 0 #00000033;
    border-radius: 6px;
    display: flex;
    position: relative;
    flex-direction: column;
    overflow: hidden;
    animation: slide 0.3s linear 1 forwards;
}
.mu-toast .toast-alert {
    padding: 10px;
    display: flex;
    font-size: 0.84em;
    font-weight: 500;
}
.mu-toast .toast-alert p {
    padding: 5px;
    margin: 0;
    flex-grow: 1;
}
.mu-toast .toast-timer {
    --progress: 0;
    height: 5px;
    background: linear-gradient(
        90deg,
        #4cd964,
        #5ac8fa,
        #007aff,
        #34aadc,
        #5856d6,
        #ff2d55
    );
    position: relative;
}
.mu-toast:where(.dark, .light, .prime, .success, .error, .info, .warn)
    .toast-timer {
    background: rgba(var(--col));
}
.mu-toast .toast-timer::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 0%;
    background: var(--bg);
    animation: grow calc(var(--timeout, 3) * 1s / 1000) linear 1 0.3s forwards;
}
.toast-close {
    cursor: pointer;
}
@keyframes grow {
    100% {
        width: 100%;
    }
}
@keyframes slide {
    0% {
        transform: translateX(100%);
    }
    60% {
        transform: translateX(-30%);
    }
    80% {
        transform: translateX(-10%);
    }
    90% {
        transform: translateX(3%);
    }
    95% {
        transform: translateX(1%);
    }
    100% {
        transform: translateX(0);
    }
}