/*
 * Bluelib Glass
 * by <me@steffo.eu>
 */

@{bluelib} {
	& {
		// Sets the backdrop-filter blur radius of all panels
		--b-panel-blur: 16px;

		// Set the opacity of the glass panels
		--b-panel-initial-opacity: 0.300;
		--b-panel-nested-opacity: 0.075;
	}

	// Ensure that browsers not supporting backdrop-filter do not apply this style
	@supports (backdrop-filter: blur(var(--b-panel-blur))) {

		@{panel}, @{table}@{panel} > @{table-caption} {
			background-color: .hsl-group(background; var(--b-panel-initial-opacity))[@c];
			backdrop-filter: blur(var(--b-panel-blur)) hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)));

			@{panel} {
				background-color: .hsl-group(current; var(--b-panel-nested-opacity))[@c];
				backdrop-filter: none;
			}
		}

		// Make sure mark still works, even considering specificity
		@{modifier-mark}, @{panel}@{modifier-mark} {
			background-color: .hsl-group(mark-background)[@c];
			backdrop-filter: none;

			// Make the modifier toggle properly
			@{modifier-mark}, @{panel}@{modifier-mark} {
				background-color: .hsl-group(background)[@c];

				// Make the modifier toggle properly
				@{modifier-mark}, @{panel}@{modifier-mark} {
					background-color: .hsl-group(mark-background)[@c];
				}
			}
		}

		// Make sure to-do still works, even considering specificity
		@{modifier-todo}, @{panel}@{modifier-todo} {
			background-color: .hsl-group(todo-background)[@c];

			// Make the modifier inherit properly
			@{panel} {
				background-color: .hsl-group(todo-background)[@c];
				backdrop-filter: none;
			}
		}
	}
}
