/* Mantém os diálogos da aplicação dentro da tela, com conteúdo acessível por rolagem. */
ion-modal:has(.red-packet-container),
ion-modal:has(.mineral-style1-top),
ion-modal:has([class*="max-w-[450px]"]) {
    --width: 100vw;
    --height: 100dvh;
    --max-width: 100vw;
    --max-height: 100dvh;
    --backdrop-opacity: .72;
}

ion-modal:has(.red-packet-container)::part(content),
ion-modal:has(.mineral-style1-top)::part(content),
ion-modal:has([class*="max-w-[450px]"])::part(content) {
    overflow: auto;
    overscroll-behavior: contain;
}

ion-modal:has(.red-packet-container) .red-packet-container {
    box-sizing: border-box;
    width: min(22.5rem, calc(100vw - 1rem)) !important;
    max-width: calc(100vw - 1rem) !important;
    height: min(30rem, calc(100dvh - 1.25rem)) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 1.25rem) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

ion-modal:has(.mineral-style1-top) .mineral-style1-top {
    height: min(23.75rem, 42dvh) !important;
}

ion-modal:has(.mineral-style1-top) .mineral-style1-content {
    transform: translateY(-3rem) !important;
}

ion-modal:has([class*="max-w-[450px]"]) [class*="max-w-[450px]"] {
    box-sizing: border-box;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 1rem) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-radius: 1rem;
}

ion-modal:has([class*="max-w-[450px]"]) [class*="max-w-[450px]"] [class*="mt-[9.3125rem]"] {
    margin-top: clamp(.75rem, 3vh, 1.5rem) !important;
}

@media (max-height: 600px) {
    ion-modal:has(.red-packet-container) .red-packet-container {
        height: calc(100dvh - .75rem) !important;
        max-height: calc(100dvh - .75rem) !important;
    }
}