@use '@mskcc/themes/tokens' as tk;
@use '_mixins.scss' as m;
@use '_variables.scss' as v;
@use '@mskcc/colors' as c;
// normalize was added below already, removing it until
// we can confirm this isn't needed. 2.3.0 is the release.
// @import './normalize/_import-now.scss';
//@import '~sanitize.css'; //FIXME

html {
    box-sizing: border-box;
    color: tk.$msk--color-content-primary;
    font-family: v.$msk--global-font-family;
    font-size: v.$msk--size-2;
    font-weight: 400;
    line-height: v.$msk--global-line-height;
    background-color: tk.$msk--color-bg;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

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

// Remove default margins
* {
    margin: 0;
}

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

// Links
a,
a:visited,
a > .material-icons-sharp,
a > .msk-icon {
    color: tk.$msk--color-content-link;
    text-decoration: none;
    transition: box-shadow 125ms ease-in-out, color 125ms ease-in-out;

    &:hover,
    &:visited:hover {
        color: tk.$msk--color-content-link-hover;
    }

    &:active,
    &:active:visited,
    &:active:visited:hover {
        color: tk.$msk--color-content-link-active;
    }
}

a,
a:visited {
    &:focus {
        outline: none;
        border-radius: 0.25rem;
        box-shadow: 0 0 0 m.msk-rem(1px) tk.$msk--color-border-focus-inner,
            0 0 0 m.msk-rem(3px) tk.$msk--color-border-focus-outer;
    }
    > .material-icons-sharp,
    > .msk-icon {
        font-size: inherit;
        position: relative;
        top: 0.063rem;
        box-shadow: none;
        color: inherit;
    }
}

a > .material-icons-sharp,
a > .msk-icon {
    font-size: inherit;
    position: relative;
    top: m.msk-rem(2px);
}

p > a,
p > a:visited {
    box-shadow: inset 0 -0.063rem 0 0 tk.$msk--color-content-link;

    &:hover,
    &:visited:hover {
        box-shadow: inset 0 -0.125rem 0 0 tk.$msk--color-content-link-hover;
    }

    &:active,
    &:active:visited,
    &:active:visited:hover {
        box-shadow: inset 0 -0.125rem 0 0 tk.$msk--color-content-link-active;
    }
}

h1,
h2,
h3 {
    font-weight: 400;
}

h4 {
    font-weight: 500;
}

h5,
h6 {
    font-weight: 700;
}

h1 {
    font-size: v.$msk--size-7;
    line-height: 1.3; //52px
    letter-spacing: -0.05rem;
}

h2 {
    font-size: v.$msk--size-6;
    line-height: 1.3; //40px
    letter-spacing: -0.05rem;
}

h3 {
    font-size: v.$msk--size-5;
    line-height: 1.4; //36px
    letter-spacing: -0.03rem;
}

h4 {
    font-size: v.$msk--size-4;
    line-height: 1.5; //32px
    letter-spacing: -0.02rem;
}

h5 {
    font-size: v.$msk--size-3;
    line-height: 1.5; //28px
}

h6 {
    font-size: v.$msk--size-2;
    line-height: 1.6; //26px
}

li + li {
    margin-top: 0;
}

h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
    margin-top: m.msk-rem(8px);
}

dl,
ul,
ol {
    padding-left: m.msk-rem(32px);
}

dt {
    font-weight: 500;
}

// Figures
figure {
    margin: 0;
}

figcaption {
    font-size: v.$msk--size-1;
    line-height: 1.5;
}

// Text-level semantics

//
// 1. Remove the bottom border in Chrome 57-
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
//

abbr[title] {
    border-bottom: none; // 1
    text-decoration: underline; // 2
    text-decoration: underline dotted; // 2
}

code,
pre,
kbd,
samp {
    font-family: v.$msk--monospace-font-family;
    //font-variation-settings: 'wght' 400;
    font-weight: 400;
}

code {
    word-break: break-word;
}

pre {
    overflow: auto;

    code {
        background-color: transparent;
        border: 0;
        color: inherit;
        font-size: inherit;
        word-break: normal;
    }
}

kbd {
    //background-color: $msk-kbd-background-color;
    border-radius: 0.2rem;
    //color: $msk-kbd-text-color;
    padding: 0.1rem 0.4rem;

    kbd {
        font-size: 100%;
        font-weight: 700;
        padding: 0;
    }
}

mark {
    //background-color: msk-highlight-color(yellow);//FIXME
}

//
// Prevent `sub` and `sup` elements from affecting the line height in all browsers.
//

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

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

//
// Add the correct font weight in Chrome, Edge, and Safari.
//

b,
strong {
    font-weight: 900;
}

//
// Add the correct font size in all browsers.
//

small {
    font-size: v.$msk--size-1;
}

//  Embedded content

//
// Remove the border on images inside links in IE 10.
//

img {
    border-style: none;
    max-width: 100%;
}

// Grouping content

//
// 1. Add the correct box sizing in Firefox.
// 2. Show the overflow in Edge and IE.
//

hr {
    box-sizing: content-box; // 1
    height: 0; // 1
    overflow: visible; // 2
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; // 1
    font-size: 100%; // 1
    line-height: 1.15; // 1
    margin: 0; // 2
}

//
// Show the overflow in IE.
// 1. Show the overflow in Edge.
//

button,
input {
    // 1
    overflow: visible;
}

//
// Remove the inheritance of text transform in Edge, Firefox, and IE.
// 1. Remove the inheritance of text transform in Firefox.
//

button,
select {
    // 1
    text-transform: none;
}

//
// Correct the inability to style clickable types in iOS and Safari.
//

button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button;
}

// Correct the padding in Firefox.
fieldset {
    margin-bottom: m.msk-rem(32px);
    padding: 0.35em 0.75em 0.625em;
}

//
// 1. Correct the text wrapping in Edge and IE.
// 2. Correct the color inheritance from `fieldset` elements in IE.
// 3. Remove the padding so developers are not caught out when they zero out
//    `fieldset` elements in all browsers.
//

legend {
    box-sizing: border-box; // 1
    color: inherit; // 2
    display: table; // 1
    max-width: 100%; // 1
    padding: 0; // 3
    white-space: normal; // 1
}

//
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
//

progress {
    vertical-align: baseline;
}

//
// Remove the default vertical scrollbar in IE 10+.
//

textarea {
    overflow: auto;
}

//
// 1. Add the correct box sizing in IE 10.
// 2. Remove the padding in IE 10.
//

[type='checkbox'],
[type='radio'] {
    box-sizing: border-box; // 1
    padding: 0; // 2
}

//
// 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;
}

//
// 1. Correct the odd appearance in Chrome and Safari.
// 2. Correct the outline style in Safari.
//

[type='search'] {
    -webkit-appearance: textfield; // 1
    outline-offset: -2px; // 2
}

//
// Remove the inner padding in Chrome and Safari on macOS.
//

[type='search']::-webkit-search-decoration {
    -webkit-appearance: none;
}

//
// 1. Correct the inability to style clickable types in iOS and Safari.
// 2. Change font properties to `inherit` in Safari.
//

::-webkit-file-upload-button {
    -webkit-appearance: button; // 1
    font: inherit; // 2
}

// Interactive

//
// Add the correct display in Edge, IE 10+, and Firefox.
//

details {
    display: block;
}

//
// Add the correct display in all browsers.
//

summary {
    display: list-item;
}

// Misc

// Add the correct display in IE 10+.
template {
    display: none;
}

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

//undo this from sanitize
nav li::before {
    content: '';
}

.msk-icon {
    color: v.$msk--icon-color;

    &.msk-icon--inherit {
        color: inherit;
    }
}