
// Base
// ––––––––––––––––––––––––––––––––––––––––––––––––––

// Set box-sizing globally to handle padding and border widths
\:root
	font-size: 10px

*,
*:after,
*:before
	box-sizing: inherit

// The base font-size is set at 62.5% for having the convenience
// of sizing rems in a way that is similar to using px: 1.6rem = 16px
html
	box-sizing: border-box
	// font-size: 62.5%
	height: 100%

// Default body styles
body
	color: $color-secondary
	font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', 'Microsoft YaHei Light', sans-serif
	font-size: 1.3rem
	font-weight: 300
	letter-spacing: .05rem
	line-height: 1.6
	margin: 0
	height: 100%
	// filter: grayscale(1)

textarea
	font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', 'Microsoft YaHei Light', sans-serif

// default link styles
a
	color: $color-primary
	text-decoration: none

	&:active,
	&:hover,
	&:hover:visited
		color: $color-secondary

	&:visited
		// color: $color-primary

li
	list-style: none

// clear the "x" button inside the search input box
input[type=text]::-ms-clear,
input[type=text]::-ms-reveal
	display: none
	width : 0
	height: 0

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration 
	display: none;

input[type='email'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
input[type='date'],
input[type='time'],
input[type='color'],
textarea,
select
	appearance: none // Removes awkward default styles on some inputs for iOS
	background-color: transparent
	border: .1rem solid $color-light
	border-radius: .4rem
	box-shadow: none
	box-sizing: inherit // Forced to replace inherit values of the normalize.css
	padding: .6rem 1.0rem // The .6rem vertically centers text on FF, ignored by Webkit

	&:focus
		border-color: $color-primary
		outline: 0

	&::placeholder
		color: $color-light

::selection
	color: white
	background-color: $color-primary

// Mixins

@mixin clear
	content: ' '
	clear: both
	display: table	

// Breakpoints
// Small devices (landscape phones, 576px and up)
$small-devices: 575.98px
// Medium devices (tablets, 768px and up)
$medium-devices: 767.98px
// Large devices (desktops, 992px and up)
$large-devices: 991.98px
// Extra large devices (large desktops, 1200px and up)
$x-large-devices: 1199.98px
