@layer components {
    alert-dialog {
        position: sticky;
        top: 2rem;
        z-index: 1;

        width: 100%;
        height: 0;

        color: var(--color-text);
        --bg: var(--color-light-blue-alt);

        &:has([open]) {
            display: block;
        }

        &[inline] {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: auto;

            & > dialog[open] {
                margin: 0;
                width: auto;
            }
        }

        &[type="success"] {
            --bg: #C4F9CF;
        }

        &[type="info"] {
            --bg: var(--color-light-blue-alt);
        }

        &[type="warning"] {
            --bg: hsl(from var(--color-orange) 30 155 75);
        }

        &[type="error"] {
            --bg: hsl(from var(--color-red) h calc(s + 70) calc(l + 38));
            color: var(--color-light);
        }

        > dialog[open] {
            position: relative;

            padding: 0 var(--size-3);

            display: grid;
            grid-template-columns: min-content auto min-content;
            align-items: center;
            gap: var(--size-3);

            color: inherit;

            background: var(--bg);
            border-radius: var(--radius-2);

            & article {
                display: grid;
                gap: var(--size-2);
                padding-block: var(--size-3);
            }

            & header {
                margin-bottom: 0;
            }

            & h2 {
                display: flex;
                align-items: center;
                justify-content: start;

                font-size: var(--font-size-2);
                font-weight: var(--font-weight-5);
            }

            & button {
                color: inherit;
            }
        }
    }
}