// General
// -------------------------------------------------------------------
// It's often advantageous to remove all margins/paddings from certain elements
blockquote,
pre,
ul,
ol,
dl,
dd,
form,
fieldset,
figure,
table,
th,
td,
caption,
hr {
    margin: 0;
    padding: 0;
}

// Hide outline on focus for elements which are given focus by JS
[tabindex='-1']:focus { outline: none; }


// Type
// -------------------------------------------------------------------
// Fix some font rendering
body,
input,
textarea,
button,
select {
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

// Improve readability when focused and also mouse hovered in all browsers.
a:active, a:hover { outline: 0; }

// Enable no-delay taps (FastClick-esque) on supporting browsers
a,
button,
[role="button"],
input,
label,
select,
textarea {
    touch-action: manipulation;
}

ul,
ol {
    margin-bottom: 0;

    ul,
    ol {
        margin-bottom: 0; // Take off bottom margin from nested lists.
    }
}

// Address variances font weight/styles and line heights.
b, strong { line-height: inherit; }

em,
i {
    font-style: italic;
    line-height: inherit;
}


// Tables
// -------------------------------------------------------------------
table {
    display: table; // Normalize display
    max-width: 100%; // Prevent from breaking out of container cells
}

// Normalize elements of a table.
td,
th {
    line-height: $line-height--base;
    vertical-align: middle;
}
th { text-align: left; }


// Forms
// -------------------------------------------------------------------
form { font-size: 1rem; }

// 1. Chrome and Firefox set a `min-width: min-content;` on fieldsets,
//    so we reset that to ensure it behaves more like a standard block element.
//    See https://github.com/twbs/bootstrap/issues/12359.
fieldset {
    border: 0; // Remove default fieldset styles
    min-width: 0; // [1]
}

legend {
    line-height: inherit; // Normalize line height
    margin: 0; // Reset margins
}

// Correct font properties not being inherited.
input, optgroup, select, textarea { line-height: inherit; }

// Reset vertical align for relevant elements.
input, select, label, { vertical-align: middle; }

// Set the height file controls to match text inputs
// Normalize file input width
input[type=file] {
    display: block;
    width: 100%;
}

textarea {
    height: auto; // Reset height for textareas
    resize: vertical; // Allow only vertical resizing of textareas
}

// Remove outline on certain elements.
select:focus, input:focus, textarea:focus { outline: 0; }

// Undo the Firefox inner focus ring
.select select:focus:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

// Make multiple select elements height not fixed
select[multiple], select[size] { height: auto; }

.select--list:after { content: none!important; }
select::-ms-expand { display: none; }

// Force option color (affects IE only)
option {
    color: $text-color;
    background-color: $white;
}

input[disabled],
input[readonly],
fieldset[disabled] input {
    cursor: not-allowed;
    opacity: 1; // iOS fix for unreadable disabled content
    pointer-events: none; // Future-proof disabling of clicks
}

button {
    line-height: inherit; // Correct font properties not being inherited
    vertical-align: middle; // Reset vertical align for relevant elements
}

// Prevent zoom on touch devices in active inputs
@media screen and (max-width: $breakpoint--sm) {
    input, textarea, select { font-size: 16px; }
}


// Embeds
// -------------------------------------------------------------------
// 1. Correct `inline-block` display not defined in IE 8/9.
// 2. Remove the gap between images, videos, audio and canvas and the bottom of
//    their containers: h5bp.com/i/440
embed,
iframe,
object,
img {
    display: inline-block; // [1]
    vertical-align: middle; // [2]
}

// Prevent border around iframes.
iframe { border: 0; }

img {
    border: 0; // Remove border when inside `a` element in IE 8/9/10
    font-style: italic; // So that `alt` text is visually offset if images don’t load
    height: auto; // Scale the height according to the width, otherwise you get stretching
    -ms-interpolation-mode: bicubic; // http://css-tricks.com/ie-fix-bicubic-scaling-for-images/
}

// Better control over svg size
svg { max-height: 100%; }

// Google Maps breaks if `max-width: 100%` acts upon it; use their selector
// to remove the effects.
.gm-style img { max-width: none; }
