@use '../functions' as func;
@use '../mixins' as mixins;

////////////////////////////////////////////////////////////
// Core
////////////////////////////////////////////////////////////

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

html {
    line-height: 1.5; // WCAG 2.1, 1.4.12
    -webkit-text-size-adjust: 100%; // stylelint-disable-line property-no-vendor-prefix
       -moz-text-size-adjust: 100%; // stylelint-disable-line property-no-vendor-prefix
            text-size-adjust: 100%; // stylelint-disable-line property-no-vendor-prefix
}

body {
    overflow-x: hidden;
    margin: 0;
}

[hidden] {
    display: none !important;
}

////////////////////////////////////////////////////////////
// Details
////////////////////////////////////////////////////////////

details {
    display: block;
}

summary {
    display: list-item;
}

////////////////////////////////////////////////////////////
// Screen reader only
////////////////////////////////////////////////////////////

.sr-only {
    @include mixins.sr-only;
}

////////////////////////////////////////////////////////////
// Form elements
////////////////////////////////////////////////////////////

button,
[type='button'],
[type='reset'],
[type='submit'] {
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

button,
input,
optgroup,
select,
textarea,
[type='button'],
[type='reset'],
[type='submit'] {
    @include mixins.appearance-none;
    font-family: inherit;
    font-size: 100%;
    line-height: 1.5;
    margin: 0;
}

button,
input { 
    overflow: visible;
}

button,
select { 
    text-transform: none;
}

fieldset {
    position: relative;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    @include mixins.appearance-none; // Fix bug where date-inputs to number-wheels in chrome.
}

input[type='number'] {
    -moz-appearance: textfield !important; // stylelint-disable-line property-no-vendor-prefix
         appearance: textfield !important;
}

legend {
    padding: 0; 
}

::-webkit-file-upload-button {
    -webkit-appearance: button; // stylelint-disable-line property-no-vendor-prefix
    font: inherit; 
}

// stylelint-disable selector-no-vendor-prefix
::-webkit-input-placeholder,
::placeholder {
    opacity: 0.54;
    color: inherit;
}
// stylelint-enable

////////////////////////////////////////////////////////////
// Monospace elements
////////////////////////////////////////////////////////////

code,
kbd,
pre,
samp {
    font-family: monospace, monospace; // stylelint-disable-line font-family-no-duplicate-names
    font-size: inherit;
}

pre {
    overflow: auto; // Ensure text can be read on small screens
}

////////////////////////////////////////////////////////////
// Search
////////////////////////////////////////////////////////////

[type="search"] {
    @include mixins.appearance-none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { 
    display: none; 
}

////////////////////////////////////////////////////////////
// Other
////////////////////////////////////////////////////////////

abbr[title] {
    text-decoration: underline dotted;
}

address,
cite,
dfn,
var {
  font-style: normal;
}

b,
strong {
    font-weight: func.font-weight('bold');
}

hr {
    overflow: hidden;
    height: 0;
    border-style: solid;
    border-width: 1px 0 0;
    color: inherit;
    display: block;
}

small {
    font-size: 80%;
}

progress {
    vertical-align: middle;
}

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

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}