.zm-dialog {
    max-width: 500px;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background-color: white;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100vw - var(--spacing-xs) * 2);

    header {
        position: sticky;
        top: 0;
        padding: var(--spacing-s) var(--spacing-m);
        display: flex;
        flex-direction: column;
        background: var(--color-palette-white);
        border-bottom: 1px solid var(--color-palette-black-50);
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        border-radius: var(--border-radius);

        li {
            display: flex;
            align-items: center;
            padding: var(--spacing-xs) var(--spacing-s);
            gap: var(--spacing-xs);
            border-top: 1px solid;
            border-bottom: 0;

            span {
                flex: 1;
                font-size: var(--font-xs);
                color: var(--color-muted);
                text-align: right;
            }

            & + li {
                margin-top: 0;
            }

            &:last-child {
                border-bottom: 1px solid;
            }

            a {
                display: flex;
                align-items: center;
                justify-content: space-between;
                text-decoration: underline;
            }

            &.ok {
                background-color: var(--color-palette-success-10);

                a {
                    color: var(--color-palette-success-90);
                }
            }

            &.warning {
                background-color: var(--color-palette-warning-10);
                border-color: var(--color-palette-warning-50);

                a {
                    color: var(--color-palette-warning-90);
                }
            }

            &.error {
                background-color: var(--color-palette-danger-10);
                border-color: var(--color-palette-danger-30);

                a {
                    color: var(--color-palette-danger-90);
                }
            }

            &.critical {
                background-color: var(--color-palette-danger-30);
                border-color: var(--color-palette-danger-70);

                a {
                    color: var(--color-palette-black);
                }
            }
        }
    }

    .zm-dialog__close {
        all: unset;
        position: absolute;
        top: 0;
        right: 0;
        display: grid;
        place-items: center;
        width: var(--button-size-small);
        height: var(--button-size-small);
        font-size: var(--font-l);
        cursor: pointer;
    }

    footer {
        position: sticky;
        bottom: 0;
        display: flex;
        justify-content: center;
        gap: var(--spacing-xs);
        padding: var(--spacing-s);
        background: var(--color-palette-white);
        border-top: 1px solid var(--color-palette-black-50);
    }
}

.zm-dialog::backdrop {
    backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.3);
}
