/**
 * Reset specific elements to make them easier to style in other contexts.
 */

html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
form,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
	padding: 0;
	margin: 0;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/**
 * Apply generic border-box to all elements.
 * See:
 * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */

/**
 * Apply border-box across the entire page.
 */
html {
	box-sizing: border-box;
}

/**
 * Relax the definition a bit, to allow components to override it manually.
 */
* {
	&,
	&::before,
	&::after {
		box-sizing: inherit;
	}
}

// HTML resets
html {
	// Set mobile font-size to one step lower for mobile
	font-size: calc(var(--global--font-size-root) / var(--global--font-size-ratio)); /* #{$typescale-root / $typescale-ratio}; */
	font-family: var(--global--font-secondary);
	line-height: var(--global--line-height-body);

	// Set mobile and ^ font-size to normal root
	@include media(mobile) {
		font-size: var(--global--font-size-root);
	}
}

// body resets
body {
	font-size: var(--global--font-size-base); /* #{$typescale-base}; */
	font-weight: normal;
	color: var(--global--color-foreground);
	text-align: left;
	background-color: var(--global--color-background);
}

// Links styles
a {
	border-bottom: 1px solid var(--global--color-secondary);
	color: var(--global--color-primary);
	text-decoration: none;
	
	&:hover,
	&:focus {
		color: var(--global--color-primary-hover);
	}

	&:active {
		color: var(--global--color-primary);
	}
}

// Focus styles
*:focus {
	outline-width: 1px;
	outline-style: dotted;
	outline-color: var(--global--color-secondary);
}

button,
a {
  cursor: pointer;
}