.dummy-modal-button {
	width: 0 !important;
	height: 0 !important;
}

.modal {
	display: none;
}

.modal.is-open {
	display: block;
}

.modal .modal-overlay {
	background: rgba(var(--black-rgb), .6);
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.modal .modal-container {
	background: var(--white);
    color: var(--black);
	box-sizing: border-box;
	max-height: 100vh;
	max-width: 500px;
	overflow-y: auto;
	padding: 16px;
}

body.dark .modal .modal-container {
  background: var(--black);
  color: var(--white);
}

@media (prefers-color-scheme: dark) {
    body .modal .modal-container {
        background: var(--black);
        color: var(--white);
    }
}

.modal .modal-button-container {
	display: flex;
	justify-content: flex-end;
}

.modal .modal-close {
	background: transparent;
	padding: 0;
	border: 0;
	cursor: pointer;
}

.modal .modal-close::before {
	content: "\2715";
}