div.toast {
    position: fixed;
    top: -5cm;
    left: 50%;
    transform: translateX(-50%);
    overflow: clip;
    z-index: 1000;
    display: grid;
    grid-template-rows: 1fr;
    width: 80vw;
    height: fit-content;
    background-color: var(--background-color);
    box-shadow: 0 0 12px 12px var(--section-title-xdark-background-color);
    border-radius: 1.5ch;
    border: 5px solid var(--section-title-xdark-background-color);

    transition: top .9s ease-in-out;

    &.show {
        top: 3cm;
    }

    * {
        pointer-events: none;
    }

    & > div {
        padding: .5rem;
    }

    div.toast-fade-timeout {
        height: .5ch;
        padding: 0;
        background-color: var(--section-title-darker-background-color);

        div.timeout-bar {
            height: .25ch;
            width: attr(data-width%, 100%);
            background-color: var(--background-color-toast-progress);
        }
    }

    div.toast-topic {
        color: var(--text-color-bright);
        background-color: var(--section-title-darker-background-color);
        box-shadow: 0 0 6px 6px var(--section-title-xdark-background-color);
        height: fit-content;
        max-height: 3rem;

        &::after {
            content: '✖';
            position: absolute;
            top: .5ch;
            right: .5ch;
        }
    }

    div.toast-message {
        color: var(--text-color);
    }
}