// Reboot
// Based off Boostrap reboot, which is based off normalize.css

// Document
//
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
*,
*::before,
*::after {
   box-sizing: border-box;
}


// Body
//
// 1. Remove the margin in all browsers.
// 2. As a best practice, apply a default `background-color`.
// 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
// 4. Change the default tap highlight to be completely transparent in iOS.
body {
   margin: 0; // 1
   font-family: $font-family-base;
   font-size: $font-size-base;
   line-height: $line-height-base;
   color: $body-color;
   background-color: $body-bg; // 2
   -webkit-text-size-adjust: 100%; // 3
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 4
}

// Suppress the focus outline on elements that cannot be accessed via keyboard.
// This prevents an unwanted focus outline from appearing around elements that
// might still respond to pointer events.
//
// Credit: https://github.com/suitcss/base
[tabindex="-1"]:focus {
   outline: none !important;
}

// Abbreviations and acronyms
abbr[title] {
   text-decoration: underline dotted; // 2
   cursor: help; // 3
   text-decoration-skip-ink: none; // 4
}

address {
   margin-bottom: 1rem;
   font-style: normal;
   line-height: inherit;
}

ol,
ul {
   margin-top: 0;
   margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
   margin-bottom: 0;
}


blockquote {
   margin: 0 0 1rem;
}


//
// Figures
//

figure {
   // Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
   // We reset that to create a better flow in-page.
   margin: 0 0 1rem;
}


//
// Images
//

img {
   // By default, `<img>`s are `inline-block`. This assumes that, and vertically
   // centers them. This won't apply should you reset them to `block` level.
   vertical-align: middle;
   // Note: `<img>`s are deliberately not made responsive by default.
   // For the rationale behind this, see the comments on the `.img-fluid` class.
}

// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
//
// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
// However, they DO support removing the click delay via `touch-action: manipulation`.
// See:
// * http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
// * http://caniuse.com/#feat=css-touch-action
// * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay

a,
area,
button,
input,
label,
select,
summary,
textarea {
   touch-action: manipulation;
}


//
// Forms
//

label {
   // Allow labels to use `margin` for spacing.
   display: inline-block;
   margin-bottom: .5rem;
}

// Reset focus style, show only on tab press (requires JS support)

a:focus,
input:focus,
select:focus,
button:focus {
   outline: 0;
}

.tab-key {
   a:focus,
   button:focus {
      outline: auto;
   }
}

// Delete FF dotted outline.
button::-moz-focus-inner {
   border: 0;
}

input,
button,
select,
textarea {
   margin: 0;
   line-height: inherit;
   font-family: inherit;
   font-size: inherit;
   // iOS adds rounded borders by default
   border-radius: 0;
   // reset FF :active:focus padding animation
   padding: 0;
}

// 1. Remove the default vertical scrollbar in IE.
// 2. Textareas should really only resize vertically so they don't break their (horizontal) containers.

textarea {
   overflow: auto; // 1
   resize: vertical; // 2
}


// 1. Browsers set a default `min-width: min-content;` on fieldsets,
//    unlike e.g. `<div>`s, which have `min-width: 0;` by default.
//    So we reset that to ensure fieldsets behave more like a standard block element.
//    See https://github.com/twbs/bootstrap/issues/12359
//    and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.

fieldset {
   min-width: 0; // 1
   padding: 0; // 2
   margin: 0; // 2
   border: 0; // 2
}

legend {
   // Reset the entire legend element to match the `fieldset`
   display: block;
   width: 100%;
   padding: 0;
   margin-bottom: .5rem;
   font-size: 1.5rem;
   line-height: inherit;
}

// Add the correct vertical alignment in Chrome, Firefox, and Opera.

progress {
   vertical-align: baseline;
}


// 1. Change font properties to `inherit` in Safari.
// 2. Correct the inability to style clickable types in iOS and Safari.

::-webkit-file-upload-button {
   font: inherit; // 1
   -webkit-appearance: button; // 2
}

// Add the correct display for main in IE 11
main {
   display: block;
}

table {
   border-collapse: collapse;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   margin-top: 0;
}

picture {
   display: block;
}