@layer components {
    .dialog {
        --panel-size: 40ch;

        background-color: var(--color-ink-inverted);
        border: 0;
        border-radius: 0.75em;
        box-shadow: var(--shadow);
        color: var(--color-ink);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        inline-size: var(--panel-size);
        max-inline-size: calc(100vw - 2rem);
        opacity: 0;
        padding: 1.5rem;
        transform: scale(0.2);
        transform-origin: top center;
        transition: var(--dialog-duration) allow-discrete;
        transition-property: display, opacity, overlay, transform;

        &::backdrop {
            background-color: var(--color-black);
            opacity: 0;
            transition: var(--dialog-duration) allow-discrete;
            transition-property: display, opacity, overlay;
        }

        &[open] {
            opacity: 1;
            transform: scale(1);

            &::backdrop {
                opacity: 0.5;
            }
        }

        @starting-style {
            &[open] {
                opacity: 0;
                transform: scale(0.2);
            }

            &[open]::backdrop {
                opacity: 0;
            }
        }
    }

    .dialog--wide   { --panel-size: 56ch; }
    .dialog--narrow { --panel-size: 32ch; }

    .dialog__header {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .dialog__title {
        font-size: var(--text-large);
        font-weight: 700;
        margin: 0;
    }

    .dialog__subtitle {
        color: var(--ink-soft);
        font-size: var(--text-medium);
        margin: 0;
    }

    .dialog__body {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        max-block-size: min(60vh, 30rem);
        overflow-y: auto;
    }

    .dialog__actions {
        align-items: center;
        display: flex;
        gap: 0.5rem;
        justify-content: center;
    }
}