@use '../../index.scss' as *;

@include config(
    'fonts',
    (
        'Inter': (
            (googleFont: true, weight: 400, style: normal),
            (googleFont: true, weight: 700, style: normal),
            (googleFont: true, weight: 900, style: normal),
        ),
    )
);

@include config('font-family', (Inter, sans-serf));
@include config('type-styles:.h1:font-weight', 900);

@include init();
@include boilerplate();

html,
body {
    scroll-behavior: smooth;
}

@include scrollbar(6px, gray(6), 0, gray(9), $nested: false);

#app {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 100vh auto;
    grid-gap: sp(1);
    grid-template-areas:
        'nav main'
        '.   main';
}

.textbox {
    @include textbox(
        (
            border-radius: 9999px,
            padding: 0 1.25em,
        )
    );
}

.nav {
    position: sticky;
    top: 0;
    background-color: white;
    padding: sp(1);
    min-width: 320px;
    grid-area: nav;
    overflow-y: scroll;
    border-right: 1px solid gray(5);
}

.nav-filter {
    > input {
        width: 100%;
    }
    // position: sticky;
    // top: 0;
}

.nav-group {
    margin-top: sp(2);
}

.nav-header {
    margin-bottom: sp(1);
}

.nav-item {
    opacity: 0.66;
    padding: 0.25em;
    &:hover {
        opacity: 1;
        color: accent();
    }
}

.main {
    grid-area: main;
}

.nav-heading {
    font-size: fs(md);
    font-weight: 700;
}

.group {
    //margin-bottom: sp(3);
}

.group-header {
    h2 {
        font-size: fs(h4);
    }
    .markdown {
        margin-top: sp(0.5);
    }
    .markdown p {
        font-size: fs(md);
    }
    pre {
        margin-top: sp(1);
    }
    margin: sp(6 0 3);
}

.item {
    padding: sp(2 0);
}

.item-header {
    font-size: fs(md);
    margin-bottom: sp(0.5);
    display: inline-flex;
    font-weight: 400;
}

.item-description {
    width: 100%;
}

.item-description p {
    max-width: 54em;
}

.item-params {
    @include table-grid(auto auto auto 1fr, auto, 0);
    margin: sp(2) 0;
}

.item-default,
.item-defaults-heading,
.item-params-heading,
.item-param {
    display: contents;
}

.item-defaults-heading,
.item-params-heading {
    font-weight: 700;
    > span {
        padding: sp(0.5 1);
        border-bottom: 2px solid gray(-4);
        &:first-child {
            padding-left: 0;
        }
    }
}

.item-default,
.item-param {
    > span,
    > div {
        padding: sp(0.5 1);
        border-bottom: 1px solid gray(4);
        &:first-child {
            padding-left: 0;
        }
    }
}

.item-examples {
    margin: sp(2 0);
}

.item-example {
    max-width: 100%;
    overflow: none;
    width: 100%;
    pre {
        width: 100%;
        display: block;
        overflow: auto;
    }
}

// config defaults

.item-defaults {
    @include table-grid((auto minmax(0, 1fr)), auto, 0);
}

.item-default {
    cursor: pointer;
    position: relative;
    &:hover {
        > span,
        > div {
            background-color: clr(select, $alpha: 0.05);
        }
        .item-default-name:after {
            opacity: 1;
        }
    }
    code,
    pre {
        font-size: rems(13px);
    }
    pre {
        padding: sp(0.75);
    }
}

.item-default-default {
    border-radius: get('controls:border-radius');
    background-color: gray(5, $alpha: 0.1);
    padding: sp(0.75);
    margin: sp(1 0);

    h5 {
        display: block;
        font-size: rems(10px);
        font-weight: 700;
        color: gray();
        text-transform: uppercase;
        margin-bottom: sp(0.5);
    }
    pre {
        background-color: transparent;
        width: 100%;
        display: block;
        overflow: auto;
        padding: 0;
    }
}

pre {
    margin: 0;
    border-radius: get('controls:border-radius');
    background-color: gray(5, $alpha: 0.1);
    display: block;
    padding: sp(0.25 0.5);
    width: 100%;
    line-height: 1.5;
    code {
        background-color: transparent;
        padding: 0;
        display: block;
    }
}

code {
    background-color: gray(5, $alpha: 0.2);
    padding: sp(0.25 0.5);
    border-radius: get('controls:border-radius');
}

strong {
    font-weight: 700;
}

.markdown {
    @include reading();

    table {
        font-size: fs(sm);
        text-align: left;
        width: 100%;
        tr,
        td,
        th {
            text-align: left;
        }
        th {
            border-bottom: 1px solid gray(-4);
        }
        td,
        th {
            padding: sp(0.25);
        }
        tr:nth-child(even) td {
            background-color: gray(8);
        }
    }
}

// copy icon

.hljs,
.item-default-name {
    position: relative;
    cursor: pointer;
    @include after {
        position: absolute;
        width: 14px;
        height: 14px;
        color: clr(select);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-image: inline-svg(
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 19"><g fill="#{clr(page-fg)}" fill-rule="nonzero"><path d="M7 0a2.99 2.99 0 0 0-2.816 2H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H9.816A2.99 2.99 0 0 0 7 0Zm0 2a1 1 0 0 1 .389 1.922L7 4l-.389-.078A1.002 1.002 0 0 1 7 2ZM2 4h2v1a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V4h2v10H2V4Z"/><path d="M14 5h1a2 2 0 0 1 1.995 1.85L17 7v10a2 2 0 0 1-1.85 1.995L15 19H5a2 2 0 0 1-1.995-1.85L3 17v-1h2v1h10V7h-1V5Z"/></g></svg>'
        );
        @include transition(opacity, fast);
        opacity: 0;
    }
    &:hover:after {
        opacity: 1;
    }
}

.item-default-name {
    white-space: nowrap;
    &:after {
        left: 0;
        top: sp(0.75);
        transform: translateX(-150%);
    }
}

.item-default-desc {
    p em {
        display: inline-flex;
        background-color: accent(-3, $alpha: 0.2);
        color: accent(-5);
        font-size: rems(9px);
        font-weight: 700;
        text-transform: uppercase;
        font-style: normal;
        height: sp(1.25);
        align-items: center;
        padding: 0 0.66em;
        line-height: 1;
        border-radius: 2px;
        position: relative;
        top: -0.25em;
    }
}

.hljs {
    &:after {
        width: 16px;
        height: 16px;

        background-image: inline-svg(
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 19"><g fill="white" fill-rule="nonzero"><path d="M7 0a2.99 2.99 0 0 0-2.816 2H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H9.816A2.99 2.99 0 0 0 7 0Zm0 2a1 1 0 0 1 .389 1.922L7 4l-.389-.078A1.002 1.002 0 0 1 7 2ZM2 4h2v1a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V4h2v10H2V4Z"/><path d="M14 5h1a2 2 0 0 1 1.995 1.85L17 7v10a2 2 0 0 1-1.85 1.995L15 19H5a2 2 0 0 1-1.995-1.85L3 17v-1h2v1h10V7h-1V5Z"/></g></svg>'
        );
        @include right-top(sp(1), sp(1));
    }
}

.copy-button {
    @include button-icon();
}

// highlight.js theme

.hljs {
    color: gray(6);
    background: gray(-8);
    padding: sp(1 1.5);
    margin: sp(1 0);
    &:hover {
        background-color: gray(-7);
    }
}

.hljs-comment,
.hljs-quote {
    color: gray();
    font-style: italic;
}

.hljs-doctag,
.hljs-keyword,
.hljs-formula {
    color: #c678dd;
}

.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
    color: #e06c75;
}

.hljs-literal {
    color: #56b6c2;
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string {
    color: #98c379;
}

.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
    color: #d19a66;
}

.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
    color: #61aeee;
}

.hljs-built_in,
.hljs-title.class_,
.hljs-class .hljs-title {
    color: #e6c07b;
}

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

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

.hljs-link {
    text-decoration: underline;
}