/* ==========================================================================
 * Basic elements (no class selectors allowed)
 * ========================================================================== */

/**
 * Set up the html
 *
 * 1. Makes sure that some fonts are better rendered
 * 2. Set font to lining figures
 *
 */

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "lnum";
	box-sizing: border-box;
	height: 100%;
    overflow-y: scroll;
}


body {
	@include font-size(base);
	position: relative;
	line-height: $line-height-ratio;
	font-family: $font-main;
    font-size: $base-font-size + px;
    margin: 0;
	color: palette(neutral, 700);
    height: 100%;
}

#app {
    position: relative;
}


/**
 * [1] Make sure elements like input and textarea inherit some base properties
 *     https://www.smashingmagazine.com/2016/11/css-inheritance-cascade-global-scope-new-old-worst-best-friends/
 *
 * [2] Setting box-sizing the best way per:
 *     https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
* {
	font-family: inherit;
	line-height: inherit;
	color: inherit;

	&,
	&:before,
	&:after {
		box-sizing: inherit;
	}
}


/**
 * [1] Turn off text-shadow when selecting text for better readability
 */
::selection {
	background: palette(feedback, focus);
	color: palette(neutral, 100);
	text-shadow: none; /* [1] */
}


/* Remove default margin around figure
 */
figure {
	margin: 0;
}


/**
 * [1] Setting 'vertical-align' removes the whitespace that appears under 'img'
 *	   elements when they are dropped into a page as-is. Safer alternative to
 *	   using 'display: block;'.
 * [2] Remove border / especially on older browsers
 */
img, svg {
	vertical-align: middle; /*[1]*/
	border: none; /*[2]*/
	max-width: 100%;
}


/**
 *  Needed for iOS to prevent input zooming
 *  https://uxcellence.com/2014/01/15/quick-fix-increase-font-size-to-16px-to-fix-input-zoom
 */
input,
select,
textarea {
	font-size: 16px;
}


// Links with no class get a default hover
//a:not([class]) {
//	position: relative;
//	color: palette(neutral, 1000);
//	font-weight: bold;
//	text-decoration: none;
//	text-decoration-skip-ink: auto; // pretty underlining links
//
//	&:hover {
//		&::after {
//			height: 2px;
//			opacity: 1;
//			transform: translateY(0px);
//		}
//	}
//
//	&:focus {
//		outline-color: palette(feedback, focus);
//	}
//
//	&::after {
//		position: absolute;
//		top: 100%;
//		left: 0;
//		width: 100%;
//		height: 1px;
//		background: palette(neutral, 1000);
//		content: '';
//		opacity: 0;
//		transition: height 300ms, opacity 300ms, transform 300ms;
//		transform: translateY(-5px);
//	}
//}


// TODO: Is this the right way to reset all margin??
// Reset all top margins
h1, h2, h3, h4, h5, h6, hgroup,
ul, ol, dd,
p, figure,
pre, table, fieldset, hr {
	margin-top: 0;
	margin-bottom: 0;
}