//
// Reset
//
// This file should contain all styles exlicitly applied to bare
// HTML tags, along with a rationale of why that is necessary.
// -------------------------------------------------------------
@import '../variables/colors.less';
@import '../variables/typography.less';

// We have a lot of <a> tags which wrap elements or use ng-click to perform
// actions. By default, an <a> tag doesn't get a hand cursor unless it has an
// `href` attribute, so we want to make sure our special case links appear
// clickable as well.
a {
	cursor: pointer;
}

// We want a set of sane defaults for the text.
// Update 2/2020 (breaking change): Background has been removed to better serve accessibility needs.
// All projects expecting background: #f6f6f6 need to set the color in their own project.
body {
	color: @color-gray-x-dark;
	font-family: @font-stack-main;
	font-size: @font-size-base;
	line-height: @font-line-height-base;
}

// We want to apply `border-box` to all elements by default, while allowing
// components to override this value if needed. For more information, see:
// https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
html {
	box-sizing: border-box;
}

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

// We want containers to have a defined height so that child elements with
// absolute positioning behave correctly.
html,
body {
	height: 100%;
}

// We set the focus to be on h1 during transitions.
// We don't want it to have an outline unless someone is tabbing.
h1:focus {
	outline: none;
}