.md-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		opacity 0.2s ease,
		visibility 0.2s ease;
}

.md-modal--show {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.md-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);

	opacity: 0;
	transition: opacity 0.2s ease;
}

.md-modal--show .md-modal__overlay {
	opacity: 1;
}

.md-modal__dialog {
	position: absolute;
	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%) scale(1);
	opacity: 0;

	transition:
		transform 0.2s ease,
		opacity 0.2s ease;

	width: 500px;
	max-width: 90vw;

	background: var(--md-default-bg-color);
	color: var(--md-default-fg-color);

	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

	display: flex;
	flex-direction: column;
}

.md-modal--show .md-modal__dialog {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

.md-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 12px 16px;
	border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.md-modal__header h3 {
	margin: 0;
	font-size: 1rem;
}

.md-modal__body {
	padding: 16px;
	line-height: 1.6;
}

.md-modal__footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;

	padding: 12px 16px;
	border-top: 1px solid var(--md-default-fg-color--lightest);
}

@keyframes modal-bounce {
	0% {
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		transform: translate(-50%, -50%) scale(1.02);
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
	}
}