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

@{bluelib} {

	& {
		// Sets the border radius of all panels
		--b-border-radius: 8px;

		// Set the shadow drawn on element placed directly on the background
		--b-outer-shadow: 2px 2px 4px .hsl-group(background)[@c];
	}

	&, @{all} {
		// Lower the default border opacity
		border-color: .hsl-group(current; 0.15)[@c];
	}

	// Give headers a slight shadow so they are easier to read outside of panels
	@{header} {
		text-shadow: var(--b-outer-shadow);
	}

	// But do not give it to headers inside panels
	@{panel} {
		@{header} {
			text-shadow: none;
		}
	}

	@{panel}, @{table}@{panel} > @{table-caption} {
		border-radius: var(--b-border-radius);

		// And a shadow effect
		box-shadow: var(--b-outer-shadow);

		// Do not give the same effects to nested panels
		@{panel} {
			background-color: .hsl-group(current; 0.075)[@c];
			backdrop-filter: none;
			box-shadow: none;
		}
	}

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

		// 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];
		border-color: .hsl-group(current)[@c];

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

	// Fixup table panels
	@{table}@{panel} {
		// Ensure table panels have no rounded borders
		border-radius: 0;

		> @{table-caption} {
			// And ensure neither do table panel captions
			border-radius: 0;

			// Minimize the visibility of the caption's box shadow to prevent overlap with the table itself
			box-shadow: var(--b-outer-shadow);
		}
	}

	@{table}@{panel-dialog} > @{table-caption} {
		border-bottom-width: 2px;
	}

	@{input} {
		background-color: .hsl-group(current; 0.025)[@c];

		&:hover {
			background-color: .hsl-group(current; 0.05)[@c];
		}

		&:active {
			background-color: .hsl-group(current; 0.075)[@c];
		}
	}

	@{input-field}, @{input-select} {
		border-radius: var(--b-border-radius) var(--b-border-radius) 0 0;
	}

	@{input-area}, @{input-multiselect} {
		border-radius: 0 var(--b-border-radius) var(--b-border-radius) 0;
	}

	@{input-button} {
		border-radius: var(--b-border-radius);
	}

	@{list-unordered}, @{list-ordered} {
		> *::marker {
			color: .hsl-group(current; 0.5)[@c];
		}
	}

	@{glossary-summary} {
		color: .hsl-group(current; 0.7)[@c];

		&::marker {
			color: .hsl-group(current; 0.5)[@c];
		}

		&:hover {
			color: .hsl-group(current)[@c];
		}

		&:hover::marker {
			color: .hsl-group(current; 0.7)[@c];
		}

		&:active::marker {
			color: .hsl-group(current)[@c];
		}
	}

	// FIXME: may not work well for lighter themes
	@{text-anchor} {
		&:hover {
			color: .hsl-group(link; "+ 0deg"; "+ 0%"; "+ 20%"; 1.0)[@c];
		}

		&:active {
			color: .hsl-group(link; "+ 0deg"; "+ 0%"; "+ 40%"; 1.0)[@c];
		}
	}

	@{text-input}, @{text-output} {
		border-radius: calc(var(--b-border-radius) / 4);
	}

	@{text-variable} {
		color: .hsl-group(current; 0.7)[@c];
	}

	@{text-quote} {
		&::before, &::after {
			color: .hsl-group(current; 0.7)[@c];
		}
	}

	@{text-ruby-annotation} {
		color: .hsl-group(current; 0.7)[@c];
	}
}
