@import "/ui/styles/_theme.scss";

.modal-overlay {
	position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 9999;
	opacity: 0;
	transition: opacity 0.12s ease;

	&.is-open { opacity: 1; }
}

.modal-scrim {
	position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
	background-color: rgba(0, 0, 0, 0.65);
	pointer-events: all;
	cursor: default;
}

.modal-dialog {
	flex-direction: column;
	min-width: 360px;
	max-width: 540px;
	background-color: $bg-elev;
	border: 1px solid $line-strong;
	border-top: 3px solid $accent;
	pointer-events: all;
	z-index: 1;
}

.modal-header {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 14px 18px 12px 18px;
	border-bottom: 1px solid $line-strong;

	.modal-title {
		flex-grow: 1;
		font-size: $fs-3;
		font-weight: 700;
		font-family: $font-primary;
		color: $text;
		letter-spacing: 1.5px;
		text-transform: uppercase;
	}

	.modal-close {
		width: 22px;
		height: 22px;
		align-items: center;
		justify-content: center;
		font-size: $fs-4;
		font-weight: 700;
		color: $text-faint;
		cursor: pointer;
		transition: color 0.1s ease;

		&:hover { color: $text; }
	}
}

.modal-body {
	flex-direction: column;
	padding: 16px 18px;
	gap: 12px;
	font-size: $fs-2;
	color: $text-dim;
}

.modal-footer {
	flex-direction: row;
	gap: 10px;
	justify-content: flex-end;
	padding: 12px 18px 14px 18px;
	border-top: 1px solid $line;
}