/* Daux imports; fonts are omitted */
@import "../../../vendor/daux/daux.io/src/css/theme_daux/vendor/normalize.scss";
@import "../../../vendor/daux/daux.io/src/css/theme_daux/_variables.scss";
@import "../../../vendor/daux/daux.io/src/css/theme_daux/_mixins.scss";
@import "../../../vendor/daux/daux.io/src/css/theme_daux/_structure.scss";
@import "../../../vendor/daux/daux.io/src/css/theme_daux/_typography.scss";
@import "../../../vendor/daux/daux.io/src/css/theme_daux/_components.scss";
@import "../../../vendor/daux/daux.io/src/css/theme_daux/_homepage.scss";
@import "../../../vendor/daux/daux.io/src/css/theme_daux/_print.scss" print;

/* Overrides */

:root {
    --font-family-text: sans-serif;
    --font-family-monospace: "Operator Mono SSm", "Operator Mono", monospace;
    --font-family-heading: sans-serif;

    --type-size-1: 1.75rem;
    --type-size-2: 1.5rem;
    --type-size-3: 1.25rem;
    --type-size-4: 1.125rem;
    --type-size-5: 1rem;
    --type-size-6: 1rem;

    --purple: #4f5b93;
    --tyrian: #793862;
    --light-purple: #8892bf;
    --lighter-purple: #c4c9df;
    --danger: #f4dfdf;

    --page: #f2f2f2;
    --text: #333;

    --red: #e63c2f;
    --blue: #15284b;
    --light-blue: #93b7bb;
    --beige: #e8d5d3;
    --green: #2c9a42;

    --dark-gray: color(var(--page) blend(var(--text) 75%));
    --gray: color(var(--page) blend(var(--text) 50%));
    --light-gray: color(var(--page) blend(var(--text) 25%));
    --lighter-gray: color(var(--page) blend(var(--text) 12.5%));
    --lightest-gray: color(#fff blend(var(--page) 75%));

    --dark: var(--text);
    --light: var(--light-purple);

    --sidebar-background: var(--text);
    --sidebar-link-active-background: var(--tyrian);
    --sidebar-link-color: var(--page);
    --sidebar-link-secondary-color: var(--page);
    --sidebar-collapsible--hamburger-color: var(--beige);

    --link-color: #369;
    --brand-color: #fff;
    --brand-background: var(--purple);

    --code-tag-background-color: transparent;
    --code-tag-border-radius: 0;
    --code-tag-box-shadow: none;

    --homepage-navbar-background: var(--red);
    --hero-button-block-background: var(--beige);
    --homepage-hero-background: #fff;
    --content-floating-blocks-background: var(--blue);
}

body {
    line-height: 1.618;
    font-size: 16px;
    color: var(--text) !important;
}

body, .Columns__right__content {
    background-color: var(--page);
}

a.Link--external::after {
    content: '';
}

.Page__header h1 {
    font-size: var(--type-size-6);
    border-bottom: 0;
    margin-bottom: 0;
}

.s-content {
    h1, h2, h3, h4, h5, h6 {
        margin-bottom: 1.5rem;
    }
    
    h1 {
        font-size: var(--type-size-1);
    }

    h2 {
        font-size: var(--type-size-2);
    }

    h3 {
        font-size: var(--type-size-3);
    }

    h4 {
        font-size: var(--type-size-4);
    }

    h5 {
        font-size: var(--type-size-5);
    }

    h6 {
        font-size: var(--type-size-6);
    }


    code {
        padding-top: 0;
        padding-bottom: 0;
        padding: 0;
        border: 0;
        margin: 0;

        &::before, &::after {
            display: none;
        }

        pre & {
            display: inline;
        }
    }

    table {
        border-collapse: separate;
        border-spacing: 2px;
        border: 2px solid var(--gray);

        thead, tbody {
            background-color: #fff;
        }

        tr {
            border-top: 0;

            &:nth-child(2n) {
                background-color: transparent;

                td {
                    background-color: #fff;
                }
            }
        }

        th, td {
            border: 0;
        }

        th {
            background-color: var(--lighter-purple);
        }
    }
}

.s-content table, .Nav__item .Nav__item {
    font-size: 1rem;
}

.Brand, h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    font-stretch: condensed;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--tyrian);
    border-bottom: 1px dotted var(--text);
    padding-bottom: 5px;
}

.Button {
    border-radius: 0;
}

.HomepageButtons .Button--hero {
    font-weight: normal;
    font-size: var(--type-size-6);
}

.Page__header {
    border-bottom: 0;
}

.Pager li > a {
    border: 2px solid var(--lighter-gray);
    border-radius: 0;

    &:hover, &:focus {
        background-color: var(--lighter-gray);
    }
}

.Pager--prev a::before {
    content: "\2190\00a0";
}
.Pager--next a::after {
    content: "\00a0\2192";
}

.Navbar {
    height: auto;
    box-shadow: none;

    .Brand {
        float: none;
        line-height: inherit;
        height: auto;
    }
}

.Homepage {
    padding-top: 10px !important;
}

.Nav__item {
    font-size: var(--type-size-6);
}

.Nav .Nav .Nav__item a {
    padding-left: 35px;
}

.Nav__arrow:before {
    margin: 0 0 0 -.25em;
    top: auto;
    bottom: calc(50% - 0.0625em);
    width: 0.375em;
    height: 0.375em;
    transform-origin: center;
}

.Nav__arrow:before, .Nav .Nav .Nav__item a .Nav__arrow:before {
    border-right-color: var(--page);
    border-top-color: var(--page);
}

.admonition {
    padding: 0.75rem;
    margin: 1.5rem 0;
    border: 1px solid var(--light-gray);
    background-color: #fff;

    p:last-child {
        margin-bottom: 0;
    }

    .danger {
        background-color: var(--danger);
        border-color: color(var(--danger) blend(var(--text) 25%));
    }
}

.hljs, .s-content pre {
    background: var(--blue);
    color: var(--beige);
}

.hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
}

.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: bold;
}

.hljs-comment, .hljs-quote {
    color: #978e9c;
}

/* Green */
.hljs-keyword, .hljs-selector-tag, .hljs-addition {
    color: #acb39a;
}

/* Cyan */
.hljs-number, .hljs-string, .hljs-meta .hljs-meta-string, .hljs-literal, .hljs-doctag, .hljs-regexp {
    color: var(--light-blue);
}

/* Blue */
.hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class {
    color: #82b7e5;
}

/* Yellow */
.hljs-attribute, .hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-class .hljs-title, .hljs-type {
    color: #c5b031;
}

/* Orange */
.hljs-symbol, .hljs-bullet, .hljs-subst, .hljs-meta, .hljs-meta .hljs-keyword, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-link {
    color: #ea8031;
}

/* Red */
.hljs-built_in, .hljs-deletion {
    color: var(--red);
}

.hljs-formula {
    background: #686986;
}

@media (--viewport-large) {
    .Columns__left {
        border: 0;
    }
}