// Fylgja (https://fylgja.dev)
// Licensed under MIT Open Source

@use "./helper" as *;

$selectors: ":root" !default;
$text-flow: 1em 1rem !default;
$separator-flow: 2.5em !default;
$list-flow: 0.5em !default;

$h1-size: 3rem !default;
$h2-size: 2rem !default;
$h3-size: 1.625rem !default;
$h4-size: 1.375rem !default;
$h-size: 1.125rem !default;
$h-weight: 700 !default;
$h-line: 1.1 !default;

$code-radius: 0.3em !default;
$code-stroke: #0003 !default;
$code-bg: var(--surface-color) !default;
$code-color: null !default;

#{$selectors} {
	--text-flow: #{$text-flow};
	--separator-flow: #{$separator-flow};
	--list-flow: #{$list-flow};
	--h-size: #{$h-size};
	--h-weight: #{$h-weight};
	--h-line: #{$h-line};
	--h1-size: #{$h1-size};
	--h2-size: #{$h2-size};
	--h3-size: #{$h3-size};
	--h4-size: #{$h4-size};
}

// Set a general default for text block margin
:where(h1, h2, h3, h4, h5, h6, p, dl, ul, ol, pre, hgroup) {
	margin-block: var(--text-flow);
}

:where(blockquote, figure, hr) {
	margin-block: var(--separator-flow);
	margin-inline: 0;
}

// Improved heading text wrapping
:where(h1, h2, h3, h4, h5, h6) {
	font-size: var(--h-size);
	font-weight: var(--h-weight);
	line-height: var(--h-line);
	text-wrap: balance;
}

:where(h1) {
	--h-size: var(--h1-size);
}

:where(h2) {
	--h-size: var(--h2-size);
}

:where(h3) {
	--h-size: var(--h3-size);
}

:where(h4) {
	--h-size: var(--h4-size);
}

// Prevent orphans in supported browsers
:where(p, li, dd) {
	text-wrap: pretty;
}

// Let links be part of the text by default and inherit the color where needed
:where(:any-link) {
	color: inherit;
}

:where(mark, :not(pre) > code) {
	padding: 0.0625em 0.25em;
}

:where(blockquote) {
	border-inline-start: 4px solid;
	padding-inline-start: 1.5em;
	padding-block: 0.25em;
}

:where(pre) {
	padding: 0.5em 1em;
	white-space: pre;
	overflow: auto;
}

:where(input, button, textarea, select, address),
::file-selector-button {
	font: inherit;
}

// Remove list styles on ul, ol elements with a list role or inside a nav element,
// The list role presevers the list A11Y: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style#accessibility_concerns
:where(:is(ul, ol)[role="list"], nav :is(ul, ol)) {
	--list-flow: 0;
	list-style: none;
	margin-block: 0;
	padding-inline-start: 0;
}

// Remove margin on nested lists and nested items inside a hgroup
:where(hgroup > *),
:where(dl, ol, ul) :where(dl, ol, ul) {
	margin-block: 0;
}

:where(dt) {
	font-weight: 500;
}

:where(li + li, dd + dt) {
	margin-block-start: var(--list-flow);
}

:where(dd) {
	margin-inline-start: 0;
}

// Correct the inheritance of colors in Firefox
:where(hr) {
	height: auto;
	border-block-end-width: 2px;
	color: inherit;
}

// Prevent sub and sup elements from affecting the line height in all browsers
:where(sub, sup) {
	position: relative;
	font-size: 0.75em;
	line-height: 0;
	vertical-align: baseline;
}

:where(sub) {
	bottom: -0.25em;
}

:where(sup) {
	top: -0.5em;
}

:where(code, pre, kbd, samp) {
	font-family: var(--family-mono);
}

:where(code, pre) {
	writing-mode: lr;
	direction: ltr;
}

:where(pre, :not(pre) > code) {
	border-radius: var(--code-radius, #{$code-radius});
	border: 1px solid var(--code-stroke, #{$code-stroke});
	background: var-if("code-bg", $code-bg);
	color: var-if("code-color", $code-color);
}