/* ==========================================================================
    Base / Document
========================================================================== */

:root {
    /* Colors */
    @each $name, $value in $theme-colors {
        --#{$name}: #{$value};
    }
    @each $name, $value in $theme-monochromes {
        --#{$name}: #{$value};
    }

    /* Theme */
    --body-text-color: var(--black);
    --body-heading-color: var(--primary);
    --body-current-page-color: var(--primary);
    --body-link-color: var(--body-text-color);
    --body-bg-color: var(--white);
    --section-bg-color: var(--gray-100);
    --form-element-color: var(--primary);
    --btn-bg-color: var(--primary);
    --btn-border-color: var(--primary);
    --btn-color: var(--white);
    --btn-hover-color: var(--white);
    --btn-hover-bg-color: var(--primary-light);
    --btn-hover-border-color: var(--primary-light);
    --navigation-sticky-bg: hsla(0, 0%, 100%, 0.8);
    --navigation-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
    --navigation-mobile-bg-color: var(--secondary);
    --navigation-link-color: var(--black);
    --navigation-link-current-color: var(--primary);
    --modal-backdrop-color: rgba(0, 0, 0, 0.1);
    --box-shadow-color: 0, 0, 0;

    /* Font Families

    css variables are defined in _app
    --font-primary: 'Roboto', sans-serif;
    --font-secondary: 'Victor Mono', sans-serif;

    */

    /* Font Weight */
    --font-extra-light: 200;
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-bold: 700;
    --font-black: 900;

    /* Typography */
    --font-base: #{$font-base};
    --font-line-height: 1.3;

    /* Heading */
    --h1: 35px;
    --h2: 30px;
    --h3: 28px;
    --h4: 25px;
    --h5: 22px;
    --h6: 18px;
    --font-heading: var(--font-secondary);
    --font-heading-weight: var(--font-regular);
    --font-heading-line-height: 1.05;

    /* Alert */
    --success: #{$success};
    --info: #{$info};
    --warning: #{$warning};
    --error: #{$error};
}

/* Theme
========================================================================== */

[data-theme='dark'] {
    --body-text-color: var(--white);
    --body-heading-color: var(--secondary);
    --body-current-page-color: var(--secondary);
    --body-bg-color: var(--black);
    --section-bg-color: var(--gray-600);
    --form-element-color: var(--secondary);
    --btn-bg-color: var(--secondary);
    --btn-border-color: var(--secondary);
    --btn-color: var(--black);
    --btn-hover-bg-color: var(--secondary-light);
    --btn-hover-color: var(--black);
    --btn-hover-border-color: var(--secondary-light);
    --navigation-sticky-bg: rgba(0, 0, 0, 0.5);
    --navigation-box-shadow: inset 0 -1px 0 0 hsla(0, 0%, 100%, 0.1);
    --navigation-mobile-bg-color: var(--primary);
    --navigation-link-color: var(--white);
    --navigation-link-current-color: var(--secondary);
    --modal-backdrop-color: rgba(0, 0, 0, 0.5);
    --box-shadow-color: 255, 255, 255;
}

/* Document
========================================================================== */

html {
    -moz-osx-font-smoothing: grayscale;
    -ms-overflow-style: scrollbar;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(var(--primary), 0.15);
    -webkit-text-size-adjust: 100%;
    background-color: var(--body-bg-color);
    color: var(--body-text-color);
    font-family: var(--font-primary);
    font-size: var(--font-base);
    line-height: var(--font-line-height);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--body-bg-color);
    color: var(--body-text-color);
    font-family: var(--font-primary);
    font-size: var(--font-base);
    line-height: var(--font-line-height);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

main {
    position: relative;
}

::-moz-selection {
    background-color: var(--primary);
    color: var(--white);
}

::selection {
    background-color: var(--primary);
    color: var(--white);
}

/* Heading
========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    line-height: var(--font-heading-line-height);
    color: var(--body-heading-color);
}

h1,
.h1 {
    font-size: var(--h1);
}

h2,
.h2 {
    font-size: var(--h2);
}

h3,
.h3 {
    font-size: var(--h3);
}

h4,
.h4 {
    font-size: var(--h4);
}

h5,
.h5 {
    font-size: var(--h5);
}

h6,
.h6 {
    font-size: var(--h6);
}

/* Body Elements
========================================================================== */

p {
    color: var(--body-text-color);
    font-size: var(--font-base);
    margin-bottom: 1.3em;
}

a {
    color: var(--body-link-color);
    font-weight: var(--font-semi-bold);
    text-decoration: none;
    transition: all 0.35s $ease-in;

    &:hover,
    &:active,
    &:focus {
        color: var(--secondary);
        text-decoration: none;
    }
}

ul,
ol {
    &[class] {
        list-style: none;
        padding: 0;
    }

    &:not([class]) {
        padding-left: 24px;
    }

    li {
        color: var(--body-text-color);
        margin-bottom: 0.4em;
        padding-bottom: 0.4em;
    }
}

svg {
    width: 100%;
    height: auto;
    max-width: 100%;
}

img {
    height: auto;
    max-width: 100%;
    width: 100%;
}

picture {
    display: block;
    height: 100%;
}

table {
    font-weight: var(--font-semi-bold);
    margin-bottom: 30px;
    width: 100%;

    th {
        @include font-size(11px);
        text-transform: uppercase;
    }

    td {
        @include font-size(13px);
    }

    th,
    td {
        border: var(--gray-400);
        padding: 10px;

        &:empty {
            background: var(--gray-400);
        }
    }
}

hr {
    background: var(--gray-400);
    border: none;
    height: 1px;
    margin: 30px 0;
}

/* Wysiwyg
========================================================================== */

.o-wysiwyg {
    > * {
        &:first-child {
            margin-top: 0 !important;
        }
        &:last-child {
            margin-bottom: 0 !important;
        }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6 {
        margin-top: 1.5em;
        margin-bottom: 0.5em;
    }

    a {
        text-decoration: underline;
    }

    img,
    svg {
        width: auto;
    }

    ul,
    ol {
        list-style: none;
        padding: 0;

        &:not([class]) {
            li {
                padding-left: 28px;
                position: relative;

                &:before {
                    left: 0;
                    content: '';
                    position: absolute;
                }
                &:last-child {
                    margin-bottom: 0;
                    padding-bottom: 0;
                }
            }
        }
    }

    ul {
        &:not([class]) {
            li {
                &:before {
                    background: var(--secondary);
                    border-radius: 50%;
                    height: 6px;
                    top: 0.6em;
                    transform: translateY(-50%);
                    width: 6px;
                }
            }
        }
    }

    ol {
        counter-reset: section;

        &:not([class]) {
            li {
                &:before {
                    color: var(--secondary);
                    content: counter(section) '- ';
                    counter-increment: section;
                    font-weight: var(--font-bold);
                }
            }
        }
    }
}
