//**********************************************************
// Reset
//----------------------------------------------------------
//
//**********************************************************

// Root
*,
::before,
::after {
    box-sizing: border-box;
}

html {
    font-size: $root_cell;
    height:    100vh;
}

body {
    font-size:   0.8rem;
    line-height: $cell;
    min-height:  100vh;
    overflow-x:  hidden;
    z-index:     1;
    @extend %font-family-sans-serif;
    @extend %margin-0;
}

// Commons
hr,
img,
iframe {
    border: 0 none;
}

img,
svg,
audio,
video,
canvas {
    vertical-align: middle;
}

sub,
sup,
progress {
    vertical-align: baseline;
}

:focus {
    outline: 0 none;
}

:disabled {
    @extend %cursor-not-allowed;
}

::selection {
    text-shadow: none;
}

script,
template,
[hidden],
[scoped],
audio:not([controls]) {
    display: none;
}

details {
    display: block;
}

summary {
    display: list-item;
    @extend %cursor-pointer;
}

figure {
    @extend %margin-top-0, %margin-left-0, %margin-right-0, %margin-bottom-half;
}

hr {
    display:          block;
    height:           1px;
    border-top-width: 1px;
    border-top-style: solid;
    @extend %padding-0;
    @extend %margin-top-0, %margin-bottom-half;
}

ul,
ol {
    @extend %margin-top-0;
    @extend %padding-left-half;

    ul,
    ol {
        @extend %margin-bottom-0;
    }

    ul {
        list-style-type: circle;
    }

    ol {
        list-style-type: lower-latin;
    }
}

li {
    list-style-position: outside;
}

dl {
    @extend %margin-top-0;
}

dt {
    font-weight: bold;
}

dd {
    @extend %margin-left-0, %margin-bottom-half;
}

// Typography
h1 {
    @extend %heading;
}

h2 {
    @extend %heading;
}

h3 {
    @extend %heading;
}

h4 {
    @extend %heading;
}

h5 {
    @extend %heading;
}

h6 {
    @extend %heading;
}

// Text semantics
p {
    text-align:  justify;
    text-indent: $grid_gap_half;
    @extend %margin-top-0, %margin-bottom-half;
}

b,
strong {
    font-weight: bolder;
}

a {
    text-decoration: underline;
    @extend %cursor-pointer;

    &:hover,
    &:active {
        text-decoration: none;
    }

    &[target="_blank"]:before {
        font-size: 90%;
        content:   "\e164\00A0";
    }
}

q {
    &,
    &:lang(fr),
    &:lang(ru) {
        quotes: "\00ab" "\00bb";
    }

    &:lang(en) {
        quotes: "\201c" "\201d";
    }

    q,
    &:lang(de) {
        quotes: "\201e" "\201c";
    }
}

blockquote {
    @extend %margin-bottom-half;
}

mark,
code {
    padding: 0 0.5em;
}

acronym {
    @extend %cursor-help;
}

abbr {
    font-variant:   small-caps;
    text-transform: uppercase;
    letter-spacing: 0.05em;

    &[title] {
        border-bottom:   none;
        text-decoration: underline dotted;
        @extend %cursor-help;
    }
}

address {
    font-style:  normal;
    line-height: inherit;
    @extend %margin-bottom-half;
}

pre,
kbd,
code,
samp {
    @extend %font-family-monospace;
}

code {
    word-wrap: break-word;
}

pre {
    display:  block;
    overflow: auto;
    @extend %margin-top-0, %margin-bottom-half;

    code {
        color:      inherit;
        word-break: normal;
    }
}

kbd {
    padding: 0.5em;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size:   75%;
    line-height: 0;
    position:    relative;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

time {
    white-space: nowrap;
}

// Tables
table {
    caption-side:    bottom;
    border-collapse: collapse;
}

caption {
    @extend %padding-top-half, %padding-bottom-half;
    text-align: left;
}

th {
    text-align: inherit;
}

tr,
td,
th,
thead,
tbody,
tfoot {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}

// Forms
legend,
fieldset,
[type="radio"],
[type="checkbox"] {
    @extend %padding-0;
}

fieldset {
    min-width: 0;
    @extend %margin-0;
    border:    0 none;
}

legend {
    line-height:   inherit;
    color:         inherit;
    display:       table;
    max-width:     100%;
    margin-bottom: -0.5em;
    white-space:   normal;
}

form {
    @extend %margin-bottom-0;
}

label,
output {
    display: inline-block;
}

input,
button,
select,
optgroup,
textarea {
    @extend %font-family-sans-serif;
    @extend %margin-0;
}

button,
select {
    text-transform: none;
}

select {
    word-wrap: normal;
}

textarea {
    overflow: auto;
    resize:   vertical;
}

button,
select,
label[for],
[role="button"],
[type="file"],
[type="radio"],
[type="reset"],
[type="range"],
[type="image"],
[type="color"],
[type="button"],
[type="submit"],
[type="checkbox"] {
    @extend %cursor-pointer;
}