@use '../base/functions' as *;

// Base styling
* {
	// outline: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	font-variant-numeric: proportional-nums;
	-webkit-font-smoothing: antialiased;
}

body {
	font-size: 1rem;
	font-family: var(--txt-body-family), sans-serif;
	color: var(--ui-text);
	-webkit-font-smoothing: antialiased;
}

// Adds focus outline to all focusable elements
a,
button,
input,
select,
[tabindex='0'] {
	// outline-offset: 0;
	outline: transparent solid 0.1875rem;
	border-radius: var(--radius-large);

	&:focus {
		outline: var(--action-outline) solid 0.1875rem;
	}

	// Removes focus from clicking but not tab key
	&:not(:focus-visible) {
		outline: transparent solid 0.1875rem;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	// We want to pin the font family to what the rest of the headlines are.
	font-family: var(--txt-hero-title-large-family), sans-serif;
	color: var(--ui-headline);
}

a:not([class]) {
	font-weight: 600;
	color: var(--action);

	&:hover,
	&:focus,
	&:visited:hover {
		color: var(--action-tertiary);
	}

	&:visited {
		color: var(--action);
	}
}

ul:not([class]),
ol:not([class]) {
	padding-left: var(--padding-large);

	li {
		padding-left: var(--padding-extra-small);
	}
}

ul {
	list-style: disc;

	ul {
		list-style: circle;

		ul {
			list-style: square;
		}
	}
}

ol {
	list-style: decimal;

	ol {
		list-style: lower-latin;

		ol {
			list-style: lower-roman;
		}
	}
}

strong,
b {
	font-weight: 700;
}

strong:not(a strong),
b:not(a b) {
	color: var(--ui-body);
}

code:not([class]) {
	border-width: 0.0625rem;
	border-style: solid;
	border-radius: 0.375rem;
	display: inline-block;
	font-size: 0.875rem;
	font-family: var(--txt-code-family), monospace;
	padding: 0 0.1875rem;
	position: relative;
	overflow-wrap: break-word;
	background-color: var(--ui-fill);
	border-color: with-opacity(var(--ui-stroke), 10);
	color: var(--action-tertiary);
}

// Does not override any 3rd party code snippets
pre:not([class]) {
	display: block;
	padding: 0.375rem 0.75rem;
	width: 100%;
	overflow-x: auto;
	border-radius: 0.375rem;
	background-color: var(--ui-accent);
	color: var(--ui-subtle);

	code:not([class]) {
		padding: none;
		white-space: initial;
		background-color: transparent;
		border: 0;
		color: var(--ui-subtle);
	}
}

hr {
	margin-top: var(--padding-small);
	margin-bottom: var(--padding-extra-small);
	height: 0.125rem;
	border: 0;
	background-color: var(--ui-stroke);
}

button {
	border: 0.0625rem solid transparent;
	background: transparent;

	&:hover {
		cursor: pointer;
	}
}

/* For images to not be able to exceed their container */
img {
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

/* The 'frameborder' attribute is now deprecated. */
iframe {
	border: 0;
}

/* Prevents smooth scroll when clicking these elements */
input[type='checkbox'],
select,
button {
	scroll-behavior: auto;
}

fieldset {
	border: 0;
}

cite {
	font-style: normal;
}

.bg-page {
	min-height: 100vh;
	height: 100%;
	overflow-x: clip; // Helps clip the decorations horizontally
}

::selection {
	background-color: #9043c6;
	-webkit-text-fill-color: #fff;
	color: #fff;
}

::selection {
	background-color: #9043c6;
	-webkit-text-fill-color: #fff;
	color: #fff;
}