.toast-container {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 1000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 28rem;
    pointer-events: none;
    transform: translateX(-50%);
    min-width: 0;
}

.toast-container > .toast-item {
    pointer-events: auto;
    position: fixed;
    left: 50%;
    width: calc(100% - 1.5rem);
    max-width: calc(28rem - 1.5rem);
    transform: translateX(-50%);
    transition:
        top 0.4s ease,
        opacity 0.3s ease-out;
    z-index: 1;
    min-width: 0;
}

.toast-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.toast-item .toast-msg {
    flex-grow: 1;
    overflow-wrap: anywhere;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    min-width: 0;
}

.toast-item .toast-close {
    position: relative;
    cursor: pointer;
    border-radius: var(--radius-box);
    background: color-mix(in srgb, currentColor 15%, transparent);
    transition: background-color 100ms;
    padding: calc(1 * var(--spacing));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    > .iconify {
        --size: 16px;
        position: relative;
        z-index: 1;
    }

    &:hover,
    &:active {
        background: color-mix(in srgb, currentColor 25%, transparent);
    }
}

.toast-close .toast-progress-circle {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.toast-progress-bar {
    animation: toast-progress-circle var(--toast-duration, 3000ms) linear
        forwards;
    animation-play-state: running;
}

.toast-item:hover .toast-progress-bar {
    animation-play-state: paused;
}

@keyframes toast-progress-circle {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 97.39;
    }
}