.toast-region {
    position: fixed;
    top: 96px;
    right: 18px;
    z-index: 10000;
    display: flex;
    width: min(390px, calc(100vw - 28px));
    max-height: calc(100vh - 116px);
    gap: 10px;
    overflow: visible;
    pointer-events: none;
    flex-direction: column;
}

.toast-region[popover] {
    inset: 96px 18px auto auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: inherit;
}

.toast {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-height: 150px;
    padding: 14px 12px 14px 14px;
    overflow: hidden;
    border: 1px solid #ffffff17;
    border-radius: 13px;
    background: #15191ef5;
    color: #f7f8f9;
    box-shadow: 0 18px 48px #0009, inset 3px 0 #b42b87;
    opacity: 0;
    pointer-events: auto;
    transform: translateX(calc(100% + 40px));
    transition:
        max-height 0.36s ease,
        padding 0.36s ease,
        margin 0.36s ease;
}

.toast.is-visible {
    opacity: 1;
    transform: translateX(0);
    animation: toast-enter 0.54s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.toast.is-exiting {
    animation: toast-exit 0.36s cubic-bezier(0.55, 0, 1, 0.45) both;
}

.toast.is-collapsing {
    max-height: 0;
    margin-top: -10px;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
}

.toast-success {
    box-shadow: 0 18px 48px #0009, inset 3px 0 #35c889;
}

.toast-error {
    box-shadow: 0 18px 48px #0009, inset 3px 0 #dc4b62;
}

.toast-icon {
    display: grid;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #a9257f2b;
    color: #f185cb;
    font-weight: 950;
    place-items: center;
}

.toast-success .toast-icon {
    background: #239b6828;
    color: #70e4ae;
}

.toast-error .toast-icon {
    background: #b6324828;
    color: #ff8999;
}

.toast p {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.toast-close {
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 8px;
    background: transparent;
    color: #9da5ac;
    font-size: 20px;
    line-height: 1;
    place-items: center;
}

.toast-close:hover {
    background: #ffffff0d;
    color: #fff;
}

.toast-timer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: #d43da3;
    transform-origin: left;
    animation: toast-countdown 5s linear forwards;
}

.toast-success .toast-timer {
    background: #35c889;
}

.toast-error .toast-timer {
    background: #dc4b62;
}

@keyframes toast-countdown {
    to {
        transform: scaleX(0);
    }
}

@keyframes toast-enter {
    0% {
        opacity: 0;
        transform: translate3d(calc(100% + 40px), 10px, 0) scale(0.96);
    }

    72% {
        opacity: 1;
        transform: translate3d(-8px, 0, 0) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes toast-exit {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate3d(calc(100% + 45px), -5px, 0) scale(0.97);
    }
}

@media (max-width: 650px) {
    .toast-region {
        top: 78px;
        right: 10px;
        width: calc(100vw - 20px);
    }

    .toast-region[popover] {
        inset: 78px 10px auto auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast,
    .toast-timer {
        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
    }
}