@use 'node_modules/rfs/scss' as rfs;

$font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol' !default;

$monoFont: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
    monospace !default;

$fontSizes: (
    'h1': 2.5rem 700,
    'h2': 2rem 600,
    'h3': 1.75rem 500,
    'h4': 1.5rem 500,
    'h5': 1.25rem normal,
    'h6': 1rem 300,
) !default;

/**
 ** Ensure certain elements are set to block by default
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

/**
 ** Hard normalise elements
 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font: inherit;
}

/**
 ** Better box model (opinion)
 */
*,
::before,
::after {
    box-sizing: border-box;
}

:root,
html,
body {
    /**
     ** Correct initial height
     */
    min-height: 100%;
    height: auto;

    /**
     ** Correct line height
     */
    line-height: 1.15;

    /**
     ** Prevent font size shifting on IOS
     */
    -webkit-text-size-adjust: 100%;

    /**
     ** Better tab size
     */
    -moz-tab-size: 4;
    tab-size: 4;

    /**
     ** Normalise font size and weight
     */
    font-size: 16px;
    font-weight: normal;

    /**
     ** Normalise default font
     */
    font-family: $font;
}

/**
 ** Set font sizes
 */
@each $ele, $touple in $fontSizes {
    #{$ele} {
        @include rfs.font-size(nth($touple, 1));

        @if length($touple) > 1 {
            font-weight: nth($touple, 2);
        }
    }
}

hr {
    /**
    ** Fix firefox weirdness https://bugzilla.mozilla.org/show_bug.cgi?id=190655
    */
    height: 0;
    color: inherit;

    /**
     ** Improve default border style (opinion)
     */
    border-style: solid;
}

/**
 ** Normalise boldness
 */
strong,
b,
mark {
    font-weight: bold;
    font-style: inherit;
}

/**
 ** Normalise italics
 */
em,
i,
cite,
q,
address,
dfn,
var {
    font-style: italic;
    font-weight: inherit;
}

/**
 ** Normalise to a mono font
 */
code,
kbd,
samp,
pre {
    font-family: $monoFont;
    font-size: 1em;
}

/**
 ** Fix font size
 */
small {
    font-size: 80%;
}

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

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/**
 ** Text decoration 
 */
a,
ins {
    text-decoration: none;
}

u {
    text-decoration: underline;
}

table {
    /**
     ** Remove text indent
     *  (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
     */
    text-indent: 0;

    /**
     ** Correct border colour inheritence
     *  (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
     */
    border-color: inherit;

    /**
    ** Opinionated styles
    */
    border-collapse: collapse;
    border-style: solid;
    border-width: 1px;

    th,
    td,
    tr {
        /**
         ** Correct border colour inheritence
         */
        border-color: inherit;

        /**
         ** Opinionated styles
         */
        border-style: solid;
        border-width: 1px;
    }
}

/**
 ** Ensure fonts are correctly set
 */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
}

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

    /**
    ** Set pointer type
    */
    cursor: pointer;
}

/**
 ** Remove styling for invalid elements
 *  (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
 */
:-moz-ui-invalid {
    box-shadow: none;
}

/**
 ** Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers
 */
legend {
    padding: 0;
}

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

/**
 ** Correct the cursor style of increment and decrement buttons in Safari
 */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

::-webkit-file-upload-button {
    /**
     ** Correct the inability to style clickable types in iOS and Safari
     */
    -webkit-appearance: button;

    /**
     ** Change font properties to 'inherit' in Safari
     */
    font: inherit;
}

/**
 ** Add the correct display in Chrome and Safari
 */
summary {
    display: list-item;
}

/**
 ** Contain overflow on specific elements (opinions)
 */
figure,
pre {
    overflow-x: auto;
}

/**
 ** Remove all animations for those that want them to be off
 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}