/*
 * Contrato visual transversal dos diálogos nativos do Project Union X.
 * Tamanhos e composições internas permanecem sob responsabilidade do domínio.
 */
:root {
    --pux-dialog-border-color: color-mix(in srgb, var(--color-base-300) 72%, transparent);
    --pux-dialog-radius: 24px;
    --pux-dialog-shadow:
        inset 0 1px 0 rgb(255 255 255 / 88%),
        inset 0 0 0 1px rgb(255 255 255 / 24%),
        0 2px 6px rgb(15 23 42 / 10%),
        0 24px 80px rgb(15 23 42 / 28%);
}

.pux-dialog.pux-dialog {
    background: var(--color-white, #fff);
    border: 1px solid var(--pux-dialog-border-color);
    border-radius: var(--pux-dialog-radius);
    box-shadow: var(--pux-dialog-shadow);
    box-sizing: border-box;
    color: var(--color-font-default-light);
    max-height: calc(100dvh - 2rem);
    max-width: calc(100dvw - 2rem);
    padding: 0;
}

.pux-dialog.pux-dialog::backdrop {
    backdrop-filter: blur(3px);
    background: rgb(15 23 42 / 48%);
}

/* Diálogos imersivos mantêm a superfície em um filho para controlar altura. */
.pux-dialog.pux-dialog--layered {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.pux-dialog .pux-dialog__surface {
    background: var(--color-white, #fff);
    border: 1px solid var(--pux-dialog-border-color);
    border-radius: var(--pux-dialog-radius);
    box-shadow: var(--pux-dialog-shadow);
}

/* Cabeçalho e rodapé formam regiões inequívocas, como no modal aprovado. */
.pux-dialog .pux-dialog__header {
    border-bottom: 1px solid var(--color-base-200);
}

.pux-dialog .pux-dialog__footer {
    border-top: 1px solid var(--color-base-200);
}

.pux-dialog .pux-dialog__icon {
    align-items: center;
    background: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
    border-radius: .625rem;
    color: var(--color-primary-600);
    display: inline-flex;
    flex: 0 0 2.5rem;
    height: 2.5rem;
    justify-content: center;
}

.pux-dialog .pux-dialog__close {
    flex: 0 0 auto;
    margin-left: auto;
}

.dark {
    --pux-dialog-border-color: color-mix(in srgb, var(--color-base-600) 78%, transparent);
    --pux-dialog-shadow:
        inset 0 1px 0 rgb(255 255 255 / 8%),
        inset 0 0 0 1px rgb(255 255 255 / 3%),
        0 2px 6px rgb(0 0 0 / 24%),
        0 24px 80px rgb(0 0 0 / 46%);
}

.dark .pux-dialog.pux-dialog,
.dark .pux-dialog .pux-dialog__surface {
    background: var(--color-base-900);
    border-color: var(--pux-dialog-border-color);
    color: var(--color-font-default-dark);
    box-shadow: var(--pux-dialog-shadow);
}

.dark .pux-dialog.pux-dialog--layered {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.dark .pux-dialog .pux-dialog__header,
.dark .pux-dialog .pux-dialog__footer {
    border-color: var(--color-base-700);
}

.dark .pux-dialog .pux-dialog__icon {
    background: color-mix(in srgb, var(--color-primary-500) 20%, transparent);
    color: var(--color-primary-400);
}

@media (max-width: 47.99rem) {
    .pux-dialog.pux-dialog {
        max-height: calc(100dvh - 1rem);
        max-width: calc(100dvw - 1rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pux-dialog.pux-dialog::backdrop {
        backdrop-filter: none;
    }
}

@media (forced-colors: active) {
    .pux-dialog.pux-dialog,
    .pux-dialog .pux-dialog__surface {
        border: 1px solid CanvasText;
        box-shadow: none;
    }
}