/**
 *  normalize
 *
 *  Thanks to https://necolas.github.io/normalize.css/, use a lot from them
 *
 *  @author Björn Hase, me@herr-hase.wtf
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://gitea.node001.net/tiny-components/plain-ui.git
 *
 */

:root {
    @each $var, $color in $colors {
        #{$var}: $color;
    }
    --font-family: #{$font-family};
}

html {
    font-size: 100%;
    line-height: 1.15; // Correct the line height in all browsers.
    -webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in iOS.
}

body,
html {
    margin: 0;
    height: 100%;
}

html,
legend {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    color: var(--text);

    background-color: var(--body);
    direction: $direction;

    font-size: $font-size;
    @include media-breakpoints('font-size', $font-size-breakpoints);

    line-height: $line-height;
    //@include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints);
}

a {
    color: var(--link);
    transition: color 0.5s;
    text-decoration: none;

    &:hover {
        color: var(--link-hover);
    }

    &:focus {
        outline: none;
    }
}

main {
    display: block; // Render the `main` element consistently in IE.
}

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

table {
    border-collapse: collapse;
    border-spacing: 0;
}

figure {
    margin: 0;
}

figcaption {
    margin: 0;
}

p {
    margin: 0;
}

/**
 *  form elements
 *
 *
 */

// Remove the margin in Firefox and Safari.
button,
input,
optgroup,
select,
textarea {
    margin: 0;
}

fieldset {
    margin: $margin;
}

// Remove the inheritance of text transform in Firefox
button,
select {
    text-transform: none;
}

// Correct the inability to style clickable types in iOS and Safari.
[type="button"],
[type="reset"],
[type="submit"],
button {
    -webkit-appearance: button;
}

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

// Restore the focus styles unset by the previous rule.
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText;
}

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

// Correct the cursor style of increment and decrement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield; // Correct the odd appearance in Chrome and Safari.
    outline-offset: -2px; // Correct the outline style in Safari.
}

// Remove the inner padding in Chrome and Safari on macOS.
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button; // Correct the inability to style clickable types in iOS and Safari.
    font: inherit; // Change font properties to `inherit` in Safari.
}

/**
 * hr
 *
 */
hr {
    box-sizing: content-box; // Add the correct box sizing in Firefox.
    height: 0; // Add the correct box sizing in Firefox.
    overflow: visible; // Show the overflow in Edge and IE.
    border: 0;
    border-top: 1px solid var(--border);
    margin: $margin;
}

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

// Add the correct display in Firefox.
details {
    display: block;
}

// Add the correct display in all browsers.
summary {
    display: list-item;
}

code,
kbd,
pre,
samp {
    font-family: var(--font-family);
    font-size: $font-size;
    // @TODO
}