@import "/lib/css/colors/colors-flexoki.css" layer(theme);
@import "/lib/css/display-options.css" layer(components);

@layer theme {
	:root {
		--ds-menu-bg: CanvasText;
		--ds-menu-text: Canvas;
		--ui-font: var(--family-pt-root-ui);

		--body: var(--flexoki-bg);
		--body-text: var(--flexoki-tx);
		--border: var(--flexoki-ui);

		--blue: light-dark(var(--blue), var(--light-blue));
	}
}

@layer global {
	html {
		font-synthesis: none;
	}

	body {
		font-family: var(--ds-font, system-ui, sans-serif);
		font-size: var(--ds-font-size, 1rem);
		font-variant-alternates: styleset(legible);
		color: var(--body-text);
		background-color: var(--body);
	}

	[id] {
		scroll-margin-block: 5rem;
	}

	legend {
		padding-inline: 0.5rem;
		font-size: var(--scale-major-third-0);
		font-weight: 700;
		line-height: 1.5;
		color: var(--body-text);
		background-color: var(--body);
	}

	table {
		background-color: Canvas;
		border: 1px solid var(--border);

		tr {
			border-block: 1px solid var(--border);
		}

		th,
		td {
			padding-inline: 1em;
			border: 0;
		}
	}
}

/* Layout */

@layer layout {
	main {
		padding-inline: 1em;
	}

	.container {
		width: 37rem;
		max-width: 100%;
		margin-inline: auto;
		padding: 0;
	}

	#paragraphs {
		margin-block: 0;
	}

	dialog {
		width: 768px;
		max-width: 100%;
		max-height: 80%;
		padding: 0;
		color: var(--body-text);
		background-color: var(--body);
		border: 2px solid var(--border);
		border-radius: 0.5rem;
		box-shadow: var(--shadow-lg);
	}

	::backdrop {
		background-color: rgb(0 0 0 / 0.5);
	}

	.font-controls {
		position: sticky;
		top: 0rem;
		z-index: 10;
		padding: 0.5rem;
		font-family: var(--ui-font);
		font-size: 12pt;
		font-variant-alternates: styleset(legible);
		text-align: center;
		background-color: var(--body);
		box-shadow: var(--shadow);
	}

	.font-controls .container {
		display: flex;
		gap: 1rem;
		align-items: center;
		width: fit-content;
		margin-inline: auto;
	}

	#paragraphs {
		list-style: none;
	}

	footer {
		margin-block: 2em;
		font-size: 12pt;
		line-height: 1.5;
		text-align: start;
		background-color: var(--body);
		border-block-start: 1px solid #95a3ab;

		a {
			font-weight: 500;

			&:hover,
			&:focus {
				color: CanvasText;
			}
		}

		em {
			color: light-dark(#af3029, #ff8c82);
		}
	}

	.back-to-top {
		position: fixed;
		right: 1rem;
		bottom: 1rem;
		display: grid;
		aspect-ratio: 1;
		height: 2em;
		place-content: center;
		font-size: 20px;
		color: var(--ds-menu-text);
		background-color: var(--ds-menu-bg);
		border-radius: 4rem;
		box-shadow: var(--shadow);

		&:hover,
		&:focus {
			color: var(--body);
			border-color: var(--body-text);
			background-color: var(--body-text);
		}
	}
}

/* Components */

@layer components {
	/* Paragraphs */

	.font-paragraph {
		margin-block: 1lh;
		line-height: 1.6;

		p {
			margin-block: 0.5rem;
			padding-inline-end: 1ex;
		}
	}

	.font-title {
		display: grid;
		grid-template-columns: 1fr auto auto;
		align-items: start;
		gap: 0.25em;
		margin-block: 1rem;
		font-size: max(14pt, 1.7em);
		color: CanvasText;
	}

	.jump-link,
	.link-btn,
	.preview-btn {
		display: grid;
		place-content: center;
		aspect-ratio: 1;
		padding-inline: 0.25em;
		font-size: 1.5rem;
		color: inherit;

		&:hover,
		&:focus {
			color: Canvas;
			background-color: CanvasText;
			outline-color: Canvas;
		}
	}

	/* Filters */

	#tag-list {
		margin-inline: auto;
		padding: 0;
		font-family: var(--ui-font);
		font-size: 12pt;
		text-align: center;
		text-wrap: balance;
		list-style: none;
	}

	.filter-li {
		display: inline-block;
		margin: 0.125rem;
		white-space: nowrap;
		break-inside: avoid;
	}

	.filter__label {
		display: flex;
		gap: 0.125rem;
		align-items: center;
		padding: 0.25rem;
		font-variant-numeric: tabular-nums;
		color: var(--body-text);
		background-color: var(--body);
		border: 1px solid;

		&:hover,
		&:focus {
			background-color: Canvas;
		}

		&:has(:checked) {
			font-weight: 700;
			color: var(--body);
			background-color: var(--body-text);
		}
	}

	.filter__count {
		padding-inline-start: 0.25rem;
		opacity: 0.7;
	}

	/* Tabs */

	.tabs {
		position: sticky;
		top: 0;
		display: grid;
		grid-template-columns: 1fr 1fr auto;
		margin: 0;
		padding: 0;
		font-family: var(--ui-font);
		font-size: 12pt;
		background-color: var(--body);
		border-block: 2px solid var(--border);
		box-shadow: var(--shadow);
		list-style: none;
	}

	@media (min-width: 768px) {
		.tabs {
			grid-template-columns: repeat(4, 1fr) auto;
		}
	}

	@media (max-width: 767px) {
		.close-tab {
			grid-column: 3;
			grid-row: 1
		}
	}

	.close-btn {
		display: grid;
		aspect-ratio: 1;
		height: 100%;
		place-content: center;
		background-color: transparent;
		border: 0;

		&:hover,
		&:focus {
			color: Canvas;
			background-color: CanvasText;
		}
	}

	.tabs__item {
		margin: 0;
	}

	.tabs__link {
		display: block;
		padding-inline: 1rem;
		padding-block: 0.5rem;
		text-align: center;
		color: var(--body-text);
	}

	.tabs__link:hover {
		box-shadow: inset 0 0 0 2px currentColor;
	}

	.tabs__content {
		padding: 1rem;
	}

	[data-tab-content] {
		display: none;
	}

	[data-tab-content]:target {
		display: block;
	}

	/* Settings */

	.settings-choice {
		display: block;
		white-space: nowrap;
	}

	.font-controls {
		label {
			display: flex;
			gap: 0.25em;
			align-items: center;
		}

		output {
			font-weight: 700;
			font-variant-numeric: tabular-nums;
		}

		[type="range"] {
			margin-inline: 0.25rem;
			color: inherit;
			vertical-align: middle;
		}
	}
}

/* Utilities */

@layer utilities {
	.prose {
		font-size: inherit;
	}

	.grid-2 {
		display: grid;
		gap: 0.5rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.grid-3 {
		display: grid;
		gap: 3rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}