.dismissible {
	min-height: 4em;
	display: flex;
	flex-flow: column nowrap;
	z-index: 999999;

	.head {
		--gap: 0.25em;
		background: var(--primary);
		background-image: linear-gradient(to bottom, var(--primary) 33%, var(--harmony-primary) 125%);
		color: var(--contrast);
		display: grid;
		grid-template-columns: auto min-content;
		grid-gap: var(--gap);
		align-items: center;
		padding: var(--gap);
		user-select: none;
		svg {
			stroke: var(--contrast);
			cursor: pointer;
		}
	}
	.title, .dismiss {
		margin: 0;
		padding: 0;
	}

	.body {
		background-color: var(--harmony-primary);
		color: var(--contrast);
		overflow-x: hidden;
		overflow-y: auto;
		flex-grow: 1;
	}

	ul.filter-defs {
		color: var(--contrast);
		fill: var(--contrast);
		stroke: var(--contrast);
		list-style: none;
		margin: 0.5em 0;
		padding: 0.125em;

		li.filter-rule {
			display: grid;
			grid-template-columns: auto min-content;
			grid-gap: 0.25em;
			margin: 0.5em 0;
			padding: 0.25em;
			align-items: center;
			background: var(--harmony-secondary);
			user-select: none;

			.filter-layer {
				font-size: 0.875em;
			}

			.filter-cql {
				font-size: 1.125em;
				color: var(--tertiary);
				&:empty {
					display: none;
				}
			}

			.filter-actions {
				grid-column: 2;
				grid-row: 1 / span 2;
			}

			svg {
				display: block;
				cursor: pointer;
				&:hover {
					fill: var(--tertiary);
					stroke: var(--tertiary);
				}
			}
		}
	}

	&:has(.filter-config) {
		&>.body {
			border: solid 2px var(--harmony-secondary);
			overflow-x: hidden;
			overflow-y: hidden;
		}

		.filter-config {
			width: 100%;
			height: 100%;
			.config-menu, .config-content {
				overflow-x: hidden;
				overflow-y: auto;
			}

			&:has(.config-content:not(:empty)) .selected-path>span,
			& li>span:hover {
				background: var(--tertiary);
				color: var(--harmony-primary);
			}

			.config-menu {
				ul {
					list-style: none;
					padding: 0;

					& li {
						& ul {
							padding: 0 0 0 1.25em;
						}

						&.filter-item, &.filter-group {
							display: block;
							margin: 0;
							padding: 0;

							& span {
								display: -webkit-box;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
								text-overflow: ellipsis;
								overflow: hidden;
								margin: 0.25em 0;
								padding: 0.125em 0.375em 0.125em 1em;
								cursor: pointer;
							}
						}

						&.filter-group {
							&>span::before {
								content: '\1F782';
								padding: 0 0.25em 0 0;
							}

							&.expanded>span::before {
								content: '\1F783';
							}

							&:not(.expanded) ul {
								display: none;
							}
						}
					}
				}
			}
			.config-content {
				.dismissible {
					width: 100%;
					height: 100%;
				}
				.head {
					background: var(--primary-harmony);
				}
			}
			.config-footer {
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;

				& button {
					display: block;
					background: transparent;
					color: var(--contrast);
					margin: 0.25em;
					border: solid 2px var(--contrast);
					padding: 0.25em;
					cursor: pointer;

					&:hover {
						background: var(--primary);
					}
				}
			}
		}
	}
	
	&:has(.filter-control, .legend-images) {
		height: 100%;
	}

	&:has(.error-response-list) {
		position: fixed;
		--hue: 0;
		--sat: 75;
		z-index: 999999;

		@media (min-width: 240px) and (min-height: 240px) {
			top: 50%;
			left: 50%;
			width: 80%;
			height: 80%;
			transform: translate(-50%, -50%);
			min-width: 240px;
			min-height: 240px;
		}

		@media (max-width: 240px), (max-height: 240) {
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.error-response-list {
			list-style: none;

			& li {
				margin: 0.25em 0;
			}
		}
	}

	&:has(.body > .features) {
		position: fixed;
		outline: solid 1px var(--secondary);
		z-index: 999999;

		@media (max-width: 420px) {
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
		}

		@media (min-width: 420px) {
			top: 50%;
			left: 50%;
			width: 80%;
			height: 80%;
			margin: 0;
			padding: 0;
			min-width: 240px;
			min-height: 240px;
			transform: translate(-50%, -50%);
		}

		.body {
			overflow-y: hidden;
			width: 100%;
			height: 100%;

			.features {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;

				& select, & input {
					background: var(--harmony-secondary);
					border: solid 2px var(--primary);
					outline: none;
					color: var(--contrast);
					border-radius: 0.25em;
					padding: 0.125em 0.5em;
					&:hover, &:focus {
						background: var(--harmony-primary);
						border-color: var(--tertiary);
					}
				}

				.control-bar {
					display: flex;
					&>* {
						display: block;
						margin: 0;
						padding: 0;
					}
				}

				.column-menu {
					width: 100%;
					height: 100%;
					overflow-x: hidden;
					overflow-y: auto;

					& ul {
						list-style: none;
						padding: 0;

						& li {
							margin: 0.25em 0;
							padding: 0.125em 0.25em;
							background: var(--harmony-primary);

							&:hover, &:has(input:checked) {
								background: var(--harmony-secondary);
							}

							& label {
								display: block;
							}
						}
					}
				}

				.container {
					height: 100%;
					display: flex;
					flex-flow: column;

					padding: 0;

					.error {
						font-weight: 700;
						color: #A72900;
						flex-grow: 1;
						align-content: center;
						width: max-content;
						height: min-content;
						margin: auto;

						&:empty {
							display: none;
						}

						& a {
							color: inherit;
						}
					}

					.content {
						position: relative;
						overflow-x: auto;
						overflow-y: auto;
						margin: 0.25em;
						flex-grow: 1;

						&:has(tbody:empty) {
							display: none;
						}
					}

					& table {
						min-width: 100%;
						&:has(tbody:empty) {
							display: none;
						}
					}

					& table, & table * {
						border-collapse: collapse;
					}

					& thead {
						position: sticky;
						top: 0;
						left: 0;
						right: 0;

						& th {
							background: var(--secondary);
							&[data-sort=asc]::after {
								content: '▲' attr(data-priority);
							}

							&[data-sort=desc]::after {
								content: '▼' attr(data-priority);
							}

							&:first-child {
								font-weight: 700;
								text-align: right;
								padding-right: 0.25em;
							}
						}
					}

					& tr {
						&:nth-child(2n) {
							background: var(--harmony-secondary);
						}
						&:nth-child(2n + 1) {
							background: var(--harmony-tertiary);
						}
					}

					& td {
						padding: 0.125em 0.25em;
						
						&:not(:first-child) {
							min-width: 6em;
							max-width: 9em;
							border-left: solid 1px var(--primary);
						}

						&:first-child {
							background: var(--primary);
							font-weight: 700;
							text-align: right;
							padding-right: 0.25em;
						}

						& span {
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							text-overflow: ellipsis;
							overflow: hidden;
						}
					}

					.pages {
						background: var(--harmony-primary);
						margin: auto;
						& span {
							display: flex;
							align-items: center;
							justify-content: center;
							&>* {
								margin: 0.25em 0.125em;
							}
						}

						& input[type=number] {
							width: 4em;
							text-align: right;
							&::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
								-webkit-appearance: none;
								margin: 0;
							}
							-moz-appearance: textfield;
							&+span::before {
								content: '/';
							}
						}
					}
				}

				@media(max-width: 520px) {
					width: 100%;
					height: 100%;
					display: grid;
					grid-template-columns: 100%;
					grid-template-rows: 32px calc(100% - 32px);
					position: relative;

					.display-menu {
						text-align: center;
						cursor: pointer;
						& ul {
							list-style: none;
							padding: 0;
							margin: 0;
							display: flex;
							&>* {
								flex-grow: 1;
							}
						}

						& svg {
							fill: var(--contrast);
							stroke: var(--contrast);
						}

						&[data-display=search] li.search svg,
						&[data-display=column] li.column svg,
						&[data-display=table] li.table svg {
							fill: var(--tertiary);
							stroke: var(--tertiary);
						}

						&:not([data-display="search"]) ~ .control-bar,
						&:not([data-display="column"]) ~ .column-menu,
						&:not([data-display="table"]) ~ .container {
							display: none;
						}
					}

					.control-bar {
						display: flex;
						flex-flow: column;

						&>* {
							display: flex;
							flex-flow: column;
							align-content: center;
							margin: 0;
							padding: 0;
						}
					}
				}

				@media(min-width: 520px) {
					display: grid;
					grid-template-columns: 8em calc(100% - 8em);
					grid-template-rows: 36px calc(100% - 36px);

					.display-menu {
						display:none;
					}

					.control-bar {
						&>* {
							width: 50%;
							padding: 0.25em 0.125em;
							&>* {
								display: inline-block;
								&:not(:last-child) {
									margin-right: 0.25em;
								}
							}
							&:first-child {
								text-align: right;
							}
						}
					}

					.control-bar {
						grid-column: span 2;
					}
				}
			}
		}
	}

	&:has(.view-state) {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: min(480px, 100%);
		height: min(420px, 100%);
		max-height: 100%;
		margin: auto;
		.view-state {
			user-select: none;
			padding: 1.5em 0 0 0;
			& table { margin:auto }
			& table, & thead, & tbody, & tr.section {
				border: solid 1px var(--primary);
				border-collapse: collapse;
			}
			& tr {
				text-align: right;
				&.section {
					font-weight: 700;
					text-align: center;
				}
				&>td, &>th {
					padding:4px;
					&:not(:only-child) {
						&:nth-child(1)::after { content: ':' }
						&:nth-child(2) { user-select:text }
						&:nth-child(3) { text-align: left }
					}
				}
			}
		}
	}

	.filter-control {
		& ul {
			list-style: none;
			padding: 0 0 0 0.75em;

			& li {
				& ul {
					padding: 0.125em 0 0 2.25em;
				}
				&.filter-group button {
					background: transparent;
					color: var(--contrast);
					border: none;
					outline: none;

					&:hover {
						color: var(--tertiary);
					}

					&::after {
						content: '▼';
					}

					&.collapsed::after {
						content: '►';
					}
				}

				& div:has(.collapsed)+ul {
					display: none;
				}
			}
		}
	}

	.body:has(.legend-images) {
		background-color: white;
	}
}

@media only screen and (max-width: 480px) {
	.dismissible {
		&:has(.filter-config) {
			width: 100%;
			height: 100%;
		}

		.filter-config {
			display: grid;
			grid-template-columns: auto;
			grid-template-rows: auto min-content;

			&:has(.config-content:not(:empty)) .config-menu,
			&:has(.config-content:empty) .config-content {
				display: none;
			}
		}
	}
}

@media only screen and (min-width: 480px) {
	.dismissible {
		&:has(.filter-config) {
			width: 60%;
			height: 60%;
			min-width: 480px;
			min-height: 360px;
		}

		.filter-config {
			display: grid;
			grid-template-columns: max-content auto;
			grid-template-rows: calc(100% - 3em) 3em;

			&>.config-menu {
				min-width: 125px;
				max-width: 180px;
				grid-row: span 2;
				background: var(--harmony-secondary);
			}

			&>.config-footer {
				margin: 0;
				padding: 0.75em 0;
				/*grid-column: span 2;*/
			}
		}
	}
}

body:has(
	.dismissible .error-response-list,
	.dismissible .features,
	.dismissible .view-state
)::before {
	content: '';
	backdrop-filter: blur(10px) saturate(40%) brightness(35%);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999998;
}