@import './root.scss';

html,
body,
#app {
    height: 100%;
    background-color: #f7f8fa;
}

.van-doc-intro {
    padding-top: 20px;
    text-align: center
}

.van-doc-intro p {
    margin-bottom: 20px
}

.van-doc-nav::-webkit-scrollbar {
    background-color: initial;
    height: 6px;
    width: 6px
}

.van-doc-nav::-webkit-scrollbar-thumb {
    background-color: initial;
    border-radius: 6px
}

.van-doc-nav:hover::-webkit-scrollbar-thumb {
    background-color: rgba(69, 90, 100, .2)
}

code {
    position: relative;
    display: block;
    padding: 16px 20px;
    overflow-x: auto;
    color: var(--van-doc-code-color);
    font-weight: 400;
    font-size: 14px;
    font-family: var(--van-doc-code-font-family);
    line-height: 26px;
    white-space: pre-wrap;
    word-wrap: break-word;
    -webkit-font-smoothing: auto;
    background-color: var(--van-doc-code-background);
    border-radius: var(--van-doc-border-radius);
}

p {
    code {
        display: inline-flex;
        padding: 4px 10px;
    }
}

pre {
    margin: 20px 0 0;

    +p {
        margin-top: 20px !important;
    }
}

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

.hljs-subst {
    color: var(--van-doc-code-color);
}

.hljs-string,
.hljs-meta,
.hljs-symbol,
.hljs-template-tag,
.hljs-template-variable,
.hljs-addition {
    color: var(--van-doc-green);
}

.hljs-comment,
.hljs-quote {
    color: var(--van-doc-code-comment-color);
}

.hljs-params,
.hljs-keyword,
.hljs-attribute {
    color: var(--van-doc-purple);
}

.hljs-deletion,
.hljs-variable,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-bullet,
.hljs-link {
    color: #eb6f6f;
}

.hljs-attr,
.hljs-selector-tag,
.hljs-title,
.hljs-section,
.hljs-built_in,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-strong {
    color: #4994df;
}

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

p {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-size: inherit;
}

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

a {
    text-decoration: none;
}

.van-doc-row {
    width: 100%;

    @media (min-width: var(--van-doc-row-max-width)) {
        width: var(--van-doc-row-max-width);
        margin: 0 auto;
    }
}

:root {
    // colors
    --van-doc-black: #000;
    --van-doc-white: #fff;
    --van-doc-gray-1: #f7f8fa;
    --van-doc-gray-2: #f2f3f5;
    --van-doc-gray-3: #ebedf0;
    --van-doc-gray-4: #dcdee0;
    --van-doc-gray-5: #c8c9cc;
    --van-doc-gray-6: #969799;
    --van-doc-gray-7: #646566;
    --van-doc-gray-8: #323233;
    --van-doc-blue: #1989fa;
    --van-doc-green: #07c160;
    --van-doc-purple: #8e69d3;

    // sizes
    --van-doc-padding: 32px;
    --van-doc-row-max-width: 1680px;
    --van-doc-nav-width: 220px;
    --van-doc-border-radius: 20px;
    --van-doc-simulator-width: 360px;
    --van-doc-simulator-height: 620px;
    --van-doc-header-top-height: 64px;

    // fonts
    --van-doc-code-font-family: 'Menlo', 'Source Code Pro', 'Monaco',
        'Inconsolata', monospace;
}

.van-doc-theme-light {
    // text
    --van-doc-text-color-1: var(--van-doc-black);
    --van-doc-text-color-2: var(--van-doc-gray-8);
    --van-doc-text-color-3: #34495e;
    --van-doc-text-color-4: var(--van-doc-gray-6);
    --van-doc-link-color: var(--van-doc-blue);

    // background
    --van-doc-background: #eff2f5;
    --van-doc-background-2: var(--van-doc-white);
    --van-doc-background-3: var(--van-doc-white);
    --van-doc-header-background: #011f3c;
    --van-doc-border-color: var(--van-doc-gray-2);

    // code
    --van-doc-code-color: #58727e;
    --van-doc-code-comment-color: var(--van-doc-gray-6);
    --van-doc-code-background: var(--van-doc-gray-1);

    // blockquote
    --van-doc-blockquote-color: #2f85da;
    --van-doc-blockquote-background: #ecf9ff;
}

.van-doc-theme-dark {
    // text
    --van-doc-text-color-1: var(--van-doc-white);
    --van-doc-text-color-2: rgba(255, 255, 255, 0.9);
    --van-doc-text-color-3: rgba(255, 255, 255, 0.75);
    --van-doc-text-color-4: rgba(255, 255, 255, 0.6);
    --van-doc-link-color: #1bb5fe;

    // background
    --van-doc-background: #202124;
    --van-doc-background-2: rgba(255, 255, 255, 0.06);
    --van-doc-background-3: rgba(255, 255, 255, 0.1);
    --van-doc-header-background: rgba(1, 31, 60, 0.3);
    --van-doc-border-color: #3a3a3c;

    // code
    --van-doc-code-color: rgba(200, 200, 200, 0.85);
    --van-doc-code-comment-color: var(--van-doc-gray-7);
    --van-doc-code-background: rgba(0, 0, 0, 0.24);

    // blockquote
    --van-doc-blockquote-color: #bae6fd;
    --van-doc-blockquote-background: rgba(7, 89, 133, 0.25);
}