// RenderKit
// github.com/matteobertoldo/renderkit
// Licensed under MIT Open Source

/// From original `normalize.css` v8.0.0.
///
/// Compared to the original normalize, the ability to disable or enable the default `appearance` for the various fields in the form, or for radio checkboxes has been added.
/// Further reset for the typography have been added.
/// @group _global renderkit
/// @link https://github.com/necolas/normalize.css
@mixin scss-normalize {
    $reset-appearance: $global-input-reset-appearence;

    // Change the default font family in all browsers (opinionated).
    // Prevent adjustments of font size after orientation changes in IE and iOS Devices.
    // Configure the default iOS tap highlight color.
    // Add `box-sizing: border-box` to `html`, not in universal selector `*` for best performance.
    // @link https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
    html {
        font-family: sans-serif;
        @if ($html-root-font-size) {
            font-size: $global-font-size;
        }
        -webkit-text-size-adjust: percentage(1);
        -webkit-tap-highlight-color: $ios-tap-color;
        box-sizing: border-box;
    }

    // universal reset (inherit ´box sizing´ for best performance)
    *, ::before, ::after {
        box-sizing: inherit;
    }

    body {
        font: {
            family: $body-font-family;
            @if ($body-root-font-size) {
                size: $global-body-font-size;
            }
            weight: $body-font-weight;
    	}
        background-color: $body-background-color;
        color: $body-base-color;
        line-height: $body-line-height;
        margin: 0;
    }

    // HTML 5 tags correct display
    // All HTML5 tags for reset the correct display in older browsers. No `hgroup` tag included because is deprecated.
    // @link http://caniuse.com/#search=html - Obsolete/deprecated HTML elements.
    // `details` `summary` correct display in Edge, IE, and Firefox. `main` correct display in IE.
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    main,
    nav,
    section,
    summary {
        display: block;
    }

    // Remove the default html tags margin
    abbr,
    blockquote,
    dd,
    dl,
    dt,
    fieldset,
    figure,
    form,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    hr,
    legend,
    li,
    ol,
    p,
    pre,
    ul {
        margin: 0;
    }

    // Add the correct display in IE 9 and lower.
    audio,
    canvas,
    progress,
    video {
        display: inline-block;
        vertical-align: baseline;
    }

    // Add the correct display in iOS 4-7.
    audio:not([controls]) {
        display: none;
        height: 0;
    }

    // Add the correct vertical alignment in Chrome, Firefox, and Opera.
    progress {
        vertical-align: baseline;
    }

    // Add the correct display in IE 10-.
    // `template` Add the correct display in IE.
    template,
    [hidden] {
        display: none;
    }

    // Remove the gray background on active links in IE 10.
    // Set `true` or `false` on `global-links-text-decoration` for remove o mantain the default underline.
    // Remove the outline on focused links (configurable).
    // [data-whatinput="*"] Detect if is a mouse or touch event for remove the defaut outline. This improve the accessibility with keyboard navigation.
    a {
        background-color: transparent;
        color: $links-color;

        @if ($global-links-text-decoration) {
            text-decoration: underline;
    	} @else {
            text-decoration: none;
        }

        @if ($focus-links-outline-hidden) {
            @if ($what-input-outline-keyboard-detect) {
                [data-whatinput="mouse"] &:focus,
                [data-whatinput="touch"] &:focus, {
                    outline: 0;
                }
            } @else {
                &:focus {
                    outline: 0;
                }
            }
        }
    }

    // Remove the bottom border in Firefox 39-.
    // Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
    abbr[title] {
        border-bottom: none;
        text-decoration: underline;
        text-decoration: underline dotted;
    }

    // Add the correct font weight in Chrome, Edge, and Safari.
    b,
    strong {
        font: {
            family: $strong-font-family;
            weight: $strong-font-weight;
        }
    }

    // Add the correct font style in Android 4.3-.
    dfn {
        font-style: italic;
    }

    // Add the correct background and color in IE 9-.
    mark {
        background-color: #fff000;
        color: #000000;
    }

    // Replace the default "quotes" in all browsers.
    q {
        &::before {
            content: '\201C';
    	}

        &::after {
            content: '\201D';
    	}
    }

    // Add the correct font size in all browsers.
    small {
        font-size: percentage(0.8);
    }

    // Prevent <sub/> and <sup/> elements from affecting the line height in all browsers.
    sub,
    sup {
        position: relative;
        font-size: percentage(0.75);
        line-height: 0;
        vertical-align: baseline;
    }

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }

    // Make `img`,`video` tags responsive in all browsers.
    img,
    video {
        max-width: 100%;
        height: auto;
        vertical-align: middle;
    }

    // Remove the border on images inside links in IE 10-, and remove the default border for `iframe` tag in all browsers.
    img,
    iframe {
        border: 0;
    }

    // Correct the inheritance and scaling of font size in all browsers.
    // Correct the odd `em` font sizing in all browsers.
    code,
    kbd,
    pre,
    samp {
        font: {
            family: monospace, monospace;
            size: 1em;
    	}
    }

    // Set default overflow auto on `pre` tag in all browsers.
    pre {
        overflow: auto;
    }

    // Add the correct box sizing in Firefox.
    // Show the overflow in Edge and IE.
    hr {
        box-sizing: content-box;
        height: 0;
        overflow: visible;
    }

    // SVG inline tag reset.
    // Hide the overflow in IE.
    svg {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        top: -0.063em;
        width: 100%;
        height: 100%;
        fill: currentColor;

        &:not(:root) {
            overflow: hidden;
    	}
    }

    // Set font smoothing on body and on form input.
    // If only apply on body the font smoothing don't have effect on inputs.
    // Reset all default font synthesis of browsers.
    // Set all text to perform legibility (configurable).
    // Remove exeed weight on fonts in Fireforx on macOS
    // Enable or disable the font "kerning" (http://blog.typekit.com/2014/02/05/kerning-on-the-web/)
    body,
    button,
    input,
    select,
    textarea {
        font-synthesis: none;
        text-rendering: $global-text-rendering;
        @if ($global-letter-spacing-apply) {
            letter-spacing: $global-letter-spacing;
        }
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        @if ($global-font-liga-kern) {
            font-feature-settings: 'liga', 'kern';
        }
        direction: $global-text-direction;
    }

    // Change font properties to `inherit` in all browsers (opinionated).
    // Remove the margin in Firefox and Safari.
    // [data-whatinput="*"] detect if is a Mouse or Touch Event for remove the defaut outline. This improve the accessibility with keyboard navigation.
    button,
    input,
    select,
    textarea {
        font-family: inherit;
        @if ($reset-appearance) {
            font-size: percentage(1);
    	}
        color: inherit;
        line-height: $body-line-height;
        margin: 0;

        @if ($focus-inputs-outline-hidden) {
            @if ($what-input-outline-keyboard-detect) {
                [data-whatinput="mouse"] &:focus,
                [data-whatinput="touch"] &:focus {
                    outline: 0;
                }

            } @else {
                &:focus {
                    outline: 0;
                }
            }
        }
    }

    // Show the overflow in IE.
    // Show the overflow in Edge.
    button,
    input {
        overflow: visible;
    }

    // Remove the inheritance of text transform in Edge, Firefox, and IE.
    // Remove the inheritance of text transform in Firefox.
    select,
    button {
        text-transform: none;
        cursor: pointer;
    }

    // Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4.
    // Correct the inability to style clickable types in iOS and Safari.
    button,
    html [type="button"],
    [type="reset"],
    [type="submit"] {
        -webkit-appearance: button;
    }

    // Remove the inner border and padding in Firefox.
    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }

    // Change the border, margin, and padding in all browsers (opinionated).
    fieldset {
        border: 1px solid silver;
        margin: 0 2px;
        padding: 0.313em 0.625em 0.750em;
    }

    // Correct the text wrapping in Edge and IE.
    // Correct the color inheritance from `fieldset` elements in IE.
    // Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
    legend {
        display: table;
        max-width: 100%;
        white-space: normal;
        color: inherit;
        padding: 0;
    }

    // Placeholder mixin for reset the default input style.
    %reset-input-style {
        appearance: none;
        border: 1px solid lightgray;
        border-radius: 0;
    }

    // Remove the default margin on input[type="checkbox"] & [type="radio"].
    // input[type="checkbox"] input[type="radio"] Remove the padding in IE 10-.
    // Loop all standard and "Cross Browsing" input type field.
    // `::-webkit-inner-spin-button`, `::-webkit-outer-spin-button` - Correct the cursor style of increment and decrement buttons in Chrome.
    // input[type="search"] Correct the outline style in Safari.
    // `::-webkit-search-cancel-button` - Remove the inner padding in Chrome and Safari.
    // `::-webkit-file-upload-button` - Correct the inability to style clickable types in iOS and Safari.
    // Change font properties to `inherit` in Safari.
    input {
        &[type="checkbox"],
        &[type="radio"] {
            @if ($global-custom-checkbox-radio) {
                appearance: none;
                @include visuallyhidden;
    		} @else {
                margin: 0;
                padding: 0;
            }
        }

        @each $input-type in (email, password, search, tel, text, url) {
            &[type="#{$input-type}"] {
                @if ($reset-appearance) {
                    @extend %reset-input-style;
                }
            }
        }

        &[type="number"]::-webkit-inner-spin-button,
        &[type="number"]::-webkit-outer-spin-button {
            height: auto;
    	}

        &[type="search"] {
            @if ($reset-appearance) {
                @extend %reset-input-style;
            }
            outline-offset: -2px;

            &::-webkit-search-decoration {
                -webkit-appearance: none;
    		}

            @if not ($global-input-search-cancel-button) {
                &::-webkit-search-cancel-button {
                    -webkit-appearance: none;
                }
            }
    	}

        &::-webkit-file-upload-button {
            -webkit-appearance: button;
            font: inherit;
            @if ($reset-appearance) {
                border: 1px solid lightgray;
                background-color: white;
                border-radius: 0;
    		}
    	}

        // Reset line break for `input` tag.
        &[type="reset"],
        &[type="submit"] {
            white-space: normal;
        }
    }

    // Global reset for select
    // `:-moz-focusring`: Hack for remove the "focus-ring" in Firefox, when <select/> is on focus.
    // Remove the default IE/Edge "arrow" pseudo element.
    // Restorage the current color in IE/Edge when is selected an option.
    select {
        @if ($global-select-reset-appearence) {
            @extend %reset-input-style;

            &:-moz-focusring {
                color: transparent;
                text-shadow: 0 0 0 $body-base-color;
    		}

            &::-ms-expand {
                display: none;
    		}

            &::-ms-value {
                color: currentColor;
    		}
    	}

        @if ($global-select-reset-appearance-options) {
            appearance: none;
            @include visuallyhidden;
    	}
    }

    // Remove the default vertical scrollbar in IE.
    textarea {
        @if ($reset-appearance) {
            @extend %reset-input-style;
    	}
        overflow: auto;
    }

    // Collapse borders on table in every browsers.
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    // IE10 viewport hack for Surface/Desktop Windows 8 bug.
    @-ms-viewport {
        width: device-width;
    }
}