.modal-navigation { display: flex; gap: var(--modal-navigation-gap, 12px); }
.modal-navigation--horizontal { flex-flow: row wrap; align-items: center; }
.modal-navigation--vertical { flex-direction: column; align-items: flex-start; }
.modal-navigation-modal { position: fixed; z-index: 999999; inset: 0; display: grid; place-items: center; padding: 24px; }
.modal-navigation-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); }
.modal-navigation-modal__window { position: relative; z-index: 1; box-sizing: border-box; max-width: 100%; max-height: calc(100vh - 48px); padding: 42px 28px 28px; overflow: auto; background: #fff; border-radius: 4px; box-shadow: 0 12px 48px rgba(0, 0, 0, .35); }
.modal-navigation-modal__close { position: absolute; top: 9px; right: 12px; border: 0; padding: 3px 10px; color: #222; background: transparent; font-size: 30px; line-height: 1; cursor: pointer; }
.modal-navigation-modal__content > :first-child { margin-top: 0; }
body.modal-navigation-is-open { overflow: hidden; }
@media (max-width: 600px) { .modal-navigation-modal { padding: 14px; } .modal-navigation-modal__window { max-height: calc(100vh - 28px); } }