@keyframes toast {
    0% {
        grid-template-rows: 0fr;
        transform: translateY(-2em);
        opacity: 0;
        margin-bottom: 0;
    }

    10% {
        grid-template-rows: 1fr;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
        margin-bottom: 1em;
    }
}

@keyframes untoast {
    0% {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-bottom: 1em;
    }

    100% {
        grid-template-rows: 0fr;
        opacity: 0;
        margin-bottom: 0;
    }
}

*[data-controller="contao--message-outlet"] {
    position: absolute;
    top: 3.75em;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 110;
    pointer-events: none;

    .message {
        /* We use grid-template-rows to animate from 0 to auto */
        display: grid;
        animation: toast forwards 0.5s;
        margin: 0 auto;
        max-width: 80ch;

        &[hidden] {
            animation: untoast forwards 0.5s;
        }

        .inner {
            pointer-events: auto;
            grid-row: 1 / span 2;
            overflow: hidden;
            max-width: 80ch;
            overflow-wrap: anywhere;
            line-height: 1.3;
            box-sizing: border-box;
            border-radius: 6px;
            box-shadow:
                rgb(0 0 0 / 20%) 3px 3px 10px,
                0 0 1px var(--border) inset;
            background-repeat: no-repeat;
            background-position: 0.8em center;
            background-color: var(--content-bg);
            position: relative;

            button.close {
                overflow: hidden;
                position: absolute;
                top: 3px;
                right: 3px;
                width: 16px;
                height: 16px;
                background: rgb(0 0 0 / 15%);
                color: var(--text);
                font-size: 0.75rem;
                line-height: 1;
                display: grid;
                border: none;
                place-items: center;
                border-radius: 50%;
                padding: 0;
                opacity: 0.5;
                font-family:
                    -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
                    sans-serif;

                &:hover {
                    opacity: 0.75;
                    background: rgb(0 0 0 / 20%);
                }
            }

            .content {
                padding: 12px 24px 12px 32px;

                .token {
                    background-color: var(--code-bg);
                    color: var(--text);
                    padding: 0 4px;
                }
            }

            &::before {
                display: block;
                content: "";
                position: absolute;
                inset: 0;
            }
        }

        &.message--info .inner {
            background-image: url("../../../contao/themes/flexible/icons/ok.svg");
            color: var(--green);

            &::before {
                background: var(--confirm-bg);
            }
        }

        &.message--error .inner {
            background-image: url("../../../contao/themes/flexible/icons/error.svg");
            color: var(--red);

            &::before {
                background: var(--error-bg);
            }
        }
    }
}