body:has(.modal-bg) {
	overflow: hidden;
}

.modal-bg {
	box-sizing: content-box;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	border: none;
	padding: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(4px) saturate(50%) brightness(45%);
	background: hsla(var(--hue), calc(1% * var(--sat)), calc(1% * var(--lum)), 20%);
	font-size: 16px;
	z-index: 999999;

	& * {
		box-sizing: content-box;
	}

	&:has(~.modal-bg) {
		display: none;
	}

	.modal-container {
		margin: 0;
		border: none;
		padding: 0px 1em 0.25em;
		width: max-content;
		min-width: calc(360px - 2 * 1em);
		max-width: min(468px, 100%);
		overflow: hidden;
		background: var(--primary);
		color: var(--contrast);
		display: flex;
		flex-flow: column nowrap;

		& fieldset {
			border-width: 1px;
			border-style: solid;
			border-color: var(--contrast);
			margin: 0;
			padding: 0.75em;
			width: calc(100% - 2 * (0.75em + 1px));
		}

		& [class^=modal-] {
			margin: 4px 0;
			padding: 0;
			width: 100%;
		}

		& .modal-message {
			text-align: center;
			display: -webkit-box;
			-webkit-line-clamp: 5;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		& .modal-errors {
			list-style: none;
			color: red;
			font-weight: bold;
			text-shadow:
						-0.5px -0.5px 2px var(--harmony-primary),
						-0.5px +0.5px 2px var(--harmony-primary),
						+0.5px -0.5px 2px var(--harmony-primary),
						+0.5px +0.5px 2px var(--harmony-primary);

			&:empty {
				display: none;
			}
		}

		& .modal-form {
			margin:0.5em 0.25em;
			border: none;
			padding: 0.25em;
			width: calc(100% - 2 * (0.25em + 0px + 0.25em));
			max-height: 300px;
			overflow-y: auto;

			&:empty {
				display: none;
			}

			& .modal-prompt {
				position: relative;
				background: var(--harmony-primary);
				margin: 2px;
				border: groove 3px var(--tertiary);
				padding: 2px;
				width: calc(100% - 2 * (2px + 3px + 2px));

				&::placeholder {
					color: var(--contrast);
					opacity: 1;
				}

				&::-ms-input-placeholder {
					color: var(--contrast);
				}

				&:active, &:focus {
					outline: none;
				}
			}

			& .modal-select {
				margin: 0.5em 1em;
				padding: 0;
				border: groove 3px var(--tertiary);
				width: calc(100% - 2 * (1em + 3px));
			}
		}

		& .modal-actions {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;

			& button {
				margin: 2px;
				border: solid 2px var(--tertiary);
				color: var(--contrast);
				background: var(--secondary);
				padding: 2px 4px;
				cursor: pointer;

				&:hover {
					background: var(--harmony-secondary);
				}
			}
		}
	}
}