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

@{bluelib} {

	/// ===== Body =====
	/// The body element has some rulesets.

	//<editor-fold desc="Rules: Body">

	& {
		// Set the default colors
		.create-hsl-group(background; 0deg; 0%; 100%);
		.create-hsl-group(foreground; 0deg; 0%; 15%);
		.create-hsl-group(primary; 0deg; 0%; 0%);
		.create-hsl-group(link; 210deg; 100%; 30%);
	
		.create-hsl-group(mark-foreground; 0deg; 0%; 0%);
		.create-hsl-group(mark-background; 60deg; 100%; 75%);
	
		.create-hsl-group(todo-foreground; 204deg; 11%; 18%);
		.create-hsl-group(todo-background; 43deg; 100%; 65%);
	
		.create-hsl-group(sample-input; 0deg; 100%; 0%);
		.create-hsl-group(sample-output; 0deg; 100%; 100%);
	
		.create-hsl-group(red; 0deg; 100%; 30%);
		.create-hsl-group(yellow; 60deg; 100%; 30%);
		.create-hsl-group(green; 120deg; 100%; 30%);
		.create-hsl-group(cyan; 180deg; 100%; 30%);
		.create-hsl-group(blue; 240deg; 100%; 30%);
		.create-hsl-group(magenta; 300deg; 100%; 30%);
	
		.map-hsl-group(inserted; green);
		.map-hsl-group(deleted; red);
		
		// Set the default fonts
		.create-font-group(text; normal; normal; 400; normal; regular; 1.3; sans-serif);
		.create-font-group(header; normal; normal; 600; normal; regular; 1.7; sans-serif);
		.create-font-group(code; normal; normal; 400; normal; regular; 1.3; monospace);
		.create-font-group(boldcode; normal; normal; 700; normal; regular; 1.3; monospace);
		.create-font-group(term; italic; normal; 700; normal; regular; 1.3; sans-serif);
		.create-font-group(summary; italic; normal; 400; normal; regular; 1.3; sans-serif);
		.create-font-group(idiomatic; italic; normal; 400; normal; regular; 1.3; sans-serif);
		.create-font-group(emphasis; italic; normal; 400; normal; regular; 1.3; sans-serif);
		.create-font-group(attention; normal; normal; 700; normal; regular; 1.3; sans-serif);
		.create-font-group(strong; normal; normal; 700; normal; regular; 1.3; sans-serif);
		.create-font-group(variable; normal; normal; 400; normal; regular; 1.3; sans-serif);
		.create-font-group(citation; normal; small-caps; 400; normal; regular; 1.3; sans-serif);
		.create-font-group(label; normal; normal; 400; normal; regular; 1.3; sans-serif);

		// Set the current color
		.map-hsl-group(current, foreground);

		// Set the background defined in the palette
		background-color: .hsl-group(background)[@c];
		.use-background-images();

		// Make the element fill all available space
		width: 100%;
		height: 100%;

		// Set the default font family
		.use-font-group(text)
	}

	//</editor-fold>

	/// ===== All =====
	/// By default, browsers style elements with some weird rulesets.
	/// This is an attempt to correct them, and to implement some Bluelib magic.

	//<editor-fold desc="Rules: All">

	&, @{all} {
		// Globally set the box-sizing to border-box, as content-box is completely insane
		&, &::before, &::after {
			box-sizing: border-box;
		}

		// Remove all default margins and paddings
		margin: 0;
		padding: 0;

		// Bluelib magic!
		// This rule sets the color of all text to be equal to the current .bluelib-color() at 100% opacity.
		// Thanks, CSS variables!
		color: .hsl-group(current)[@c];
		border-color: .hsl-group(current)[@c];

		// Set the default border properties for no unexpected behaviour from browser styles
		border-width: 0;
		border-style: solid;

		// Get the scrollbar color from the theme
		scrollbar-color: .hsl-group(current)[@c] .hsl-group(background)[@c];

		// TODO: I HATE HOW BROWSERS HANDLE THIS
		&:focus-visible {
			outline-width: 4px;
			outline-style: solid;
			outline-color: .hsl-group(current; 0.3)[@c];
		}
	}

	//</editor-fold>

	/// ===== Page =====
	/// These rulesets apply to the four page areas: main, aside, header and footer

	//<editor-fold desc="Rules: Page">

	@{page-header}, @{page-footer} {
		text-align: center;
	}

	@{page-footer} {
		margin: 1rem 0;
		font-size: x-small;
	}

	//</editor-fold>

	/// ===== Floats =====
	/// Floats allow for elements to be automatically positioned in a different position than normal.

	//<editor-fold desc="Rules: Floats">

	@{float-top} {
		margin-bottom: auto;
	}

	@{float-right} {
		margin-left: auto;
	}

	@{float-bottom} {
		margin-top: auto;
	}

	@{float-left} {
		margin-right: auto;
	}

	@{float-hcenter} {
		margin-left: auto;
		margin-right: auto;
	}

	@{float-vcenter} {
		margin-top: auto;
		margin-bottom: auto;
	}

	//</editor-fold>

	/// ===== Headers =====
	/// Headers are the titles of the page.

	//<editor-fold desc="Rules: Headers">

	@{header-1} {
		// Make h1 larger than h2
		// Why is it not so by default?!
		font-size: 2.5em;
	}

	@{header-2} {
		// Make h2 a bit larger as well
		font-size: 1.75em;
	}

	@{header} {
		text-align: center;

		.map-hsl-group(current; primary);

		.use-font-group(header);
	}

	//</editor-fold>

	/// ===== Panels =====
	/// Panels are the main sectioning elements available in Bluelib.
	/// Many instances of them should be present on the page!
	/// They should group small amounts of tightly related content, which can be understood more or less separately from the rest of the page.

	//<editor-fold desc="Rules: Panels">

	// The base panel class.
	@{panel} {
		// And a padding to separate them from their contents
		padding-top: 8px;
		padding-right: 8px;
		padding-left: 8px;
		padding-bottom: 8px;
		// Remove the border, just to be sure
		border-width: 0;
		border-style: solid;

		// Panels should try to fill the most space possible
		width: 100%;

		// Have panels be column-flex objects to facilitate alignments
		display: flex;
		flex-direction: column;
		gap: 8px;

		// Give the first panel in a stack a fixed background color, so it may be seen against a background
		background-color: .hsl-group(background)[@c];

		// Set a min-width for the first level panel
		@media (max-width: 492px) {
			min-width: calc(100vw - 16px);
		}
		@media (min-width: 493px) {
			min-width: 476px;			
		}

		// Make borders togglable
		&@{border-top}, &@{panel-box} {
			border-top-width: 2px;
			padding-top: 6px;
		}

		&@{border-right}, &@{panel-box} {
			border-right-width: 2px;
			padding-right: 6px;
		}

		&@{border-left}, &@{panel-box}, &@{panel-dialog} {
			border-left-width: 2px;
			padding-left: 6px;
		}

		&@{border-bottom}, &@{panel-box} {
			border-bottom-width: 2px;
			padding-bottom: 6px;
		}

		// For compatibility, make panel-parenthesis available
		&@{panel-parenthesis} {
			font-size: smaller;
		}

		// Do not set min-width for nested panels
		@{panel} {
			min-width: unset;
		}
	}

	//</editor-fold>


	/// ===== Chapters =====
	/// A chapter is a decorative element separating its children in a certain number of columns.

	//<editor-fold desc="Rules: Chapters">

	// Chapter zero means that the number of panels is not set and they should not be wrapped
	@{chapter-0} {
		flex-wrap: nowrap;

		> @{all} {
			// Elements inside may be forced to shrink
			flex-shrink: 1;
		}
	}

	// Set the basis of elements of the various chapter sizes
	@{chapter-1} {
		> @{all} {
			flex-basis: calc(100% / 2);
		}
	}

	@{chapter-2} {
		> @{all} {
			flex-basis: calc(100% / 3);
		}
	}

	@{chapter-3} {
		> @{all} {
			flex-basis: calc(100% / 4);
		}
	}

	@{chapter-4} {
		> @{all} {
			flex-basis: calc(100% / 5);
		}
	}

	@{chapter-5} {
		> @{all} {
			flex-basis: calc(100% / 6);
		}
	}

	@{chapter-6} {
		> @{all} {
			flex-basis: calc(100% / 7);
		}
	}

	@{chapter-7} {
		> @{all} {
			flex-basis: calc(100% / 8);
		}
	}

	@{chapter-8} {
		> @{all} {
			flex-basis: calc(100% / 9);
		}
	}

	@{chapter-9} {
		> @{all} {
			flex-basis: calc(100% / 10);
		}
	}

	@{chapter} {
		// Be a row flexbox to separate elements in columns
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		gap: 8px;
		justify-content: center;
		align-items: stretch;

		// Add the gap as a vertical margin, so that multiple chapters can be placed next to each other
		margin: 8px 0;

		> @{all} {
			// Allow all children to grow
			flex-grow: 1;
			// But not to shrink
			flex-shrink: 0;
		}

		> @{header} {
			// Headings should fill up all horizontal space available and force a wrap
			flex-basis: 100%;

			margin-top: 1.2em;
		}
	}

	//</editor-fold>

	/// ===== Separators =====
	/// Separators are horizontal lines separating elements.

	//<editor-fold desc="Rules: Separators">

	@{separator} {
		border-width: 1px;
		border-style: dashed;
	}

	@{separator-light} {
		border-style: dotted;
	}

	@{separator-heavy} {
		border-style: solid;
	}

	//</editor-fold>

	/// ===== Images =====
	/// Images are changed to block elements and automatically resized to fit their container.

	//<editor-fold desc="Rules: Images">

	@{image} {
		// Change images to block
		display: block;

		// Limit their width
		max-width: 100%;
		// Resize the contained image to fully fit the element
		object-fit: contain;
	}

	@{image-limit-half} {
		// Limit the image size to half of the vertical viewport
		max-height: max(28.2vw, 50vh);
	}

	@{image-limit-quarter} {
		// Limit the image size to a quarter of the vertical viewport
		max-height: max(14.1vw, 25vh);
	}

	//</editor-fold>

	/// ===== Tables =====
	/// Tables are elements whose children are aligned in a grid.

	//<editor-fold desc="Rules: Tables">

	@{table} {
		// Prevent ugly stacking borders
		border-collapse: collapse;

		@{table-head}, @{table-data} {
			// Leave a little breathing room between table elements, even if not as much as with a table panel
			padding: 3px 7px;
			border-width: 1px;
		}

		@{table-caption} {
			// Make captions have the same border as the cells
			border-width: 1px;

			// Assign captions to their own font group
			.use-font-group(caption);

			&@{table-caption-top} {
				// Place captions on the correct side of the table
				caption-side: top;
				// Remove the bottom border as it cannot collapse
				border-bottom-width: 0;
			}

			&@{table-caption-bottom} {
				// Place captions on the correct side of the table
				caption-side: bottom;
				// Remove the top border as it cannot collapse
				border-top-width: 0;
			}
		}

		/// ----- Panels -----
		/// Tables can be integrated with panels!

		&@{panel} {
			// Override the flex display of panels
			display: table;

			@{table-head}, @{table-data} {
				// Have more space between cells
				padding: 8px;
			}

			@{table-caption} {
				// Behave as a regular panel and have text where it usually is
				text-align: inherit;

				// Add a background color to top-level table panel captions as if they were panels themselves
				background-color: .hsl-group(background)[@c];

				// Use the same padding as cells
				padding: 8px;

				// Since captions can't be made flex, go back to the old style of defining margins
				@{all} {
					margin-top: 8px;
					margin-bottom: 8px;

					&:first-child {
						margin-top: 0;
					}

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}

		&@{panel-box} {
			@{table-row} {
				border-width: 1px;
			}

			@{table-head}, @{table-data} {
				border-width: 1px;
				padding: 7px;
			}

			@{table-caption} {
				border-width: 2px;
				padding: 6px;

				&@{table-caption-top} {
					// Remove the bottom border again because specificity
					border-bottom-width: 0;
				}

				&@{table-caption-bottom} {
					// Remove the top border again because specificity
					border-top-width: 0;
				}
			}
		}

		&@{panel-dialog} {
			@{table-header} > @{table-row} {
				border-bottom-width: 1px;
			}

			@{table-body} > @{table-row} {
				border-width: 0;
			}

			@{table-footer} > @{table-row} {
				border-top-width: 1px;
			}

			@{table-head}, @{table-data} {
				border-width: 0 0 0 1px;
				padding: 8px 8px 8px 7px;
			}

			@{table-caption} {
				border-width: 0 0 0 2px;
				padding: 8px 8px 8px 6px;
			}
		}
	}

	//</editor-fold>

	/// ===== Lists =====
	/// Lists are marked series of children elements

	//<editor-fold desc="Rules: Lists">

	@{panel} {
		> @{list-unordered}, > @{list-ordered} {
			margin-left: 6ex;
		}
	}

	//</editor-fold>

	/// ===== Glossaries =====
	/// Glossaries are key-value pairs of items

	//<editor-fold desc="Rules: Glossaries">

	@{glossary-term} {
		margin-top: 0.5em;
		padding: 0.2em 0;

		.map-hsl-group(current; primary);

		.use-font-group(term);
	}

	@{glossary-description} {
		margin-left: 4.5ex;
		margin-bottom: 0.5em;
	}

	@{glossary-details} {
		margin-left: 4.5ex;
	}

	@{glossary-summary} {
		cursor: pointer;

		margin-left: -4ex;
		padding: 0.2em 0;

		.use-font-group(summary);

		// Prevent the user from accidentaly selecting the summary
		user-select: none;
	}

	//</editor-fold>

	/// ===== Modifiers =====

	//<editor-fold desc="Rules: Modifiers">

	@{modifier-fade} {
		opacity: 0.3;
	}

	@{modifier-mark} {
		// Assign marks to their own font group
		.use-font-group(mark);

		// Use the set color as background for marking
		background-color: .hsl-group(mark-background)[@c];
		.map-hsl-group(current; mark-foreground);

		// If applied twice, go back to "normality"
		@{modifier-mark} {
			background-color: .hsl-group(background)[@c];
			.map-hsl-group(current; foreground);

			// If applied thrice, mark again and not anymore
			@{modifier-mark} {
				background-color: .hsl-group(mark-background)[@c];
				.map-hsl-group(current; mark-foreground);
			}
		}
	}

	@{modifier-todo} {
		.map-hsl-group(current; todo-foreground);

		// Ensure it overrides properly the background color of panels
		&, @{panel} {
			border-style: dashed;
			background-color: .hsl-group(todo-background)[@c];
		}
	}

	@{property-disabled} {
		border-style: dashed;
		cursor: not-allowed;
	}

	@{modifier-red} {
		.map-hsl-group(current; red);
	}

	@{modifier-yellow} {
		.map-hsl-group(current; yellow);
	}

	@{modifier-green} {
		.map-hsl-group(current; green);
	}

	@{modifier-cyan} {
		.map-hsl-group(current; cyan);
	}

	@{modifier-blue} {
		.map-hsl-group(current; blue);
	}

	@{modifier-magenta} {
		.map-hsl-group(current; magenta);
	}

	//</editor-fold>

	/// ===== Inputs =====

	//<editor-fold desc="Rules: Inputs">

	@{input} {
		// Disable the browser font override
		font: inherit;

		// Make the element feel clickable
		cursor: pointer;

		// Uniform the various properties of the elements
		background-color: transparent;

		// Add some padding to avoid visual overload
		padding: 0.125em 0.75ex;

		// Align all inputs to the middle
		vertical-align: middle;

		// Remove default input minimum width
		min-width: 0;

		// By default, no borders should be present
		border-width: 0;

		border-color: .hsl-group(current; 0.4)[@c];

		&::placeholder {
			opacity: 1;
			color: .hsl-group(current; 0.4)[@c];
		}

		&:hover:not(@{property-disabled}) {
			border-color: .hsl-group(current; 0.7)[@c];

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

		&:active:not(@{property-disabled}), &:focus:not(@{property-disabled}) {
			border-color: .hsl-group(current)[@c];
		}
	}

	// Prevent the wild resizing of areas
	@{input-area} {
		resize: vertical;
	}

	@{input-field}, @{input-select} {
		// Fields and selects should have a bottom border
		border-bottom-width: 2px;
	}

	@{input-area}, @{input-multiselect} {
		// Areas and multiselects should have a left border
		border-left-width: 2px;
	}

	// Mark interactivity by changing the mouse cursor
	@{input-field}:not(@{property-disabled}), @{input-area}:not(@{property-disabled}) {
		cursor: text;
	}

	@{input-select}:not(@{property-disabled}), @{input-multiselect}:not(@{property-disabled}) {
		cursor: vertical-text;
	}

	@{input-range}:not(@{property-disabled}) {
		cursor: ew-resize;
	}

	@{input-radio}:not(@{property-disabled}), @{input-checkbox}:not(@{property-disabled}), @{input-button}:not(@{property-disabled}), @{input-color}:not(@{property-disabled}) {
		cursor: pointer;
	}

	// Configure option display
	@{input-select}, @{input-multiselect} {
		& optgroup {
			// Clearly display the grouping of options
			padding-bottom: 0.25em;

			// Use the header font
			.use-font-group(header);

			& option {
				// Indent and pad
				padding: 0.125em 0 0.125em 2ex;
			}
		}

		& option {
			// Use the regular font
			.use-font-group(text)
		}
	}

	// Override the default browser appearence for radios and checkboxes
	@{input-radio}, @{input-checkbox} {
		appearance: none;

		// Set a fixed size
		width: 1em;
		height: 1em;

		// Remove the padding
		padding: 2px;

		// Override the default border width
		border-width: 2px;

		// Prepare the element to display something inside
		display: inline-flex;
		justify-content: center;
		align-items: center;

		&::before {
			// Force the creation of a pseudo-element inside
			display: block;
			content: "";

			width: 100%;
			height: 100%;
		}

		// If the element is checked, display it
		&:checked::before {
			background-color: .hsl-group(current)[@c];
		}
	}

	@{input-radio} {
		// Radios should be round
		border-radius: 100%;

		&::before {
			border-radius: 100%;
		}
	}

	@{input-range} {
		padding: 0;
	}

	@{input-button} {
		border-width: 2px;

		// Borders should reflect the interactible feeling of the element
		border-style: outset;

		&:active {
			border-style: inset;
		}
	}

	// Unmanaged inputs
	@{input-file}, @{input-color} {
		padding: 0;
	}

	// Webkit hacks
	@media screen and (-webkit-min-device-pixel-ratio: 0) {
		// Make the icons that webkit randomly add to fields AT LEAST use the correct color
		@{input-field} {
			&::-webkit-calendar-picker-indicator {
				// smh why doesn't it support fill
				filter: invert(calc(calc(var(--bhsl-current-lightness) - 50%) * 1000))
			}
		}

		// Draw a background color on the option dropdown menu
		@{input-select} optgroup, @{input-select} option {
			background-color: .hsl-group(background)[@c];

			&::before {
				// Remove the tabs that Chrome adds before the options
				content: "";
			}
		}
	}

	//</editor-fold>

	/// ===== Forms =====

	//<editor-fold desc="Rules: Inputs">

	@{form-flex} {
		display: flex;
		flex-direction: column;

		justify-content: stretch;

		> @{form-flex-content} {
			margin: 0.5em 0;
		}

		> @{form-flex-choice} {
			display: flex;
			gap: 1ex;
			min-height: 1.675em; // Not sure why this specific number, but it looks good...

			> @{all}:first-child, > @{all}:last-child {
				margin: auto 0;
				flex-basis: 15%;
				flex-grow: 0;
				flex-shrink: 0;

				.use-font-group(label);
				.map-hsl-group(current; primary);
			}

			> @{all} {
				flex-grow: 1;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				align-items: stretch;
				gap: 1ex;
			}

			> @{all}:first-child {
				text-align: right;
				display: block;
			}

			> @{all}:last-child {
				text-align: left;
				display: block;
			}
		}
	}

	//</editor-fold>

	/// ===== Text =====

	//<editor-fold desc="Rules: Text">

	@{text-anchor} {
		.map-hsl-group(current; link);
	}

	@{text-idiomatic} {
		.use-font-group(idiomatic);
	}

	@{text-emphasis} {
		.use-font-group(emphasis);
	}

	@{text-attention} {
		.use-font-group(attention);
	}

	@{text-strong} {
		.use-font-group(strong);
	}

	@{text-inserted} {
		.map-hsl-group(current; inserted);
	}

	@{text-deleted} {
		.map-hsl-group(current; deleted);
	}

	@{text-code}, @{text-preformatted}, @{text-input}, @{text-output} {
		.use-font-group(code);

		@{text-attention} {
			.use-font-group(boldcode);
		}
	}

	@{text-preformatted} {
		overflow-x: scroll;
	}

	@{text-input}, @{text-output} {
		padding: 0 0.35ex;
		border-width: 1px;
		border-style: solid;

		@{text-input}, @{text-output} {
			border-width: 0;
		}
	}

	@{text-input} {
		background-color: .hsl-group(sample-output)[@c];
		border-color: .hsl-group(sample-input)[@c];
		.map-hsl-group(current; sample-input);

		@{text-input} {
			.use-font-group(boldcode);
		}
	}

	@{text-output} {
		background-color: .hsl-group(sample-input)[@c];
		border-color: .hsl-group(sample-output)[@c];
		.map-hsl-group(current; sample-output);

		@{text-output} {
			.use-font-group(boldcode);
		}
	}

	@{text-variable} {
		.use-font-group(variable);
	}

	@{text-citation} {
		.use-font-group(citation);
	}

	@{text-definition} {
		.use-font-group(term);
		.map-hsl-group(current; primary);
	}

	@{text-abbreviation} {
		cursor: help;
	}

	//</editor-fold>
}
