.modal {
    background: @theme-color-background-tinyContrast;
    color: @theme-color-text;
}

.modal.open {
    display: flex !important;
    flex-direction: column;
}

// Materialize.js sets `top` and `z-index` inline when animating Materialize
// modals in. Vue-driven `MatomoModal`s don't run that code, so we provide
// static fallbacks (matching Materialize's defaults: `endingTop: 10%`, and a
// z-index above the `.modal-overlay` baseline of 999). Scoped to
// `.matomo-modal` so third-party plugin modals that style `.modal.open`
// themselves are not affected.
.matomo-modal.open {
    top: 10%;
    z-index: 1003;
    box-shadow: 0 10px 40px 0 rgba(165, 177, 202, 0.30), 0 0 3px 0 rgba(165, 177, 202, 0.30);
}

.modal .modal-content {
    flex: auto;
    overflow-y: auto;

    .vertical-scroll-shadows(@theme-color-background-tinyContrast);
}

.matomo-modal .matomo-modal-content {
    overscroll-behavior: contain;
}

.modal .modal-footer {
    flex: none;
    background: @theme-color-background-tinyContrast;
}

// Vue-driven `MatomoModal`s toggle `.open` on their overlay rather than
// relying on Materialize.js to set inline display/opacity. Scoped to
// `.matomo-modal-overlay` so Materialize-driven overlays (and any third-party
// `.modal-overlay` callers) keep their existing behavior.
.matomo-modal-overlay.open {
    display: block;
    opacity: 0.7;
}
