src_front/less/modal.less
.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;

	&>.dimmer {
		backdrop-filter: blur(5px);
		background-color: rgba(0,0,0,.5);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 1;
	}

	&>.holder {
		.center();
		z-index: 2;
		position: absolute;
		margin: auto;
		width: 100%;
		max-width: 800px;
		max-height: var(--vh);
		padding: 1em;
		gap: 1em;
		display: flex;
		flex-direction: column;
		// font-size: clamp(.8em, 1.5vw, 1em);
		color: var(--color-text);
		border-radius: var(--border-radius);
		box-shadow: var(--box-shadow);
		background-color: var(--background-color-secondary);

		&>.head {
			padding-bottom: 0;
			display: flex;
			flex-direction: row;
			.icon {
				height: 1em;
			}
			&>.title {
				flex-grow: 1;
				font-size: 1.5em;
				text-align: center;
			}
			&>.close, &>.icon:not(.loader) {
				width: 1em;
				height: 1em;
				max-width: 1em;
				max-height: 1em;
				padding: 0;
				border-radius: .5em;
				background-color: transparent;
				:deep(.icon) {
					max-height: 1em;
				}
			}
		}

		&>.content {
			flex-grow: 1;
			overflow-x: visible;
			overflow-y: auto;
			padding: 2px;//Avoids scroll to appear if content is small. No idea why.
		}
	}
}