@layer components {
    system-message {
        position: absolute;
        top: var(--size-5);
        right: var(--size-5);
        background: var(--color-lightgrey);
        border-radius: var(--radius-2);
        padding: var(--size-4);
        z-index: 1001;
        max-width: 350px;

        a {
            display: block;
            text-decoration: none;
            color: var(--color-black);
        }

        .close {
            position: absolute;
            top: var(--size-3);
            right: var(--size-3);
            cursor: pointer;
            transition: color 0.2s ease;

            &:hover {
                color: var(--color-red);
            }
        }

        &[state="hide"] {
            animation:
                var(--animation-fade-out) forwards;
            animation-timing-function: var(--ease-elastic-in-out-4);
            animation-duration: 0s;

            pointer-events: none;
        }

        &[state="shut"] {
            animation:
                var(--animation-fade-out) forwards;
            animation-timing-function: var(--ease-elastic-in-out-4);
            animation-duration: 1s;

            pointer-events: none;
        }

        &[state="open"] {
            animation:
                var(--animation-scale-down) reverse,
                var(--animation-fade-out) reverse;
            animation-timing-function: var(--ease-squish-5);
            animation-duration: 1s;
        }
    }
}