/* @mixin scroller($backgroundColor: #e6e9ea, $width: 4px) {
    &::-webkit-scrollbar {
        width: $width;
        background-color: lighten($backgroundColor, 80%);
    }
    &::-webkit-scrollbar-thumb {
        height: 5px;
        border-radius: 2px;
        background-color: $backgroundColor;
    }
} */

@import '@/css/mixins/scroll.css';

@import 'highlight.js/styles/github.css';

.mac {
    font-family: pingFang-SC-Regular, Microsoft Yahei, Helvetica, Aria;
}

.win {
    font-family: Microsoft Yahei, pingFang-SC-Regular, Helvetica, Aria;
}

body {
    color: #737987;
    /* @mixin scroller red, 100px; */
    @mixin scroller;
}

.head-info {
    width: calc(100% - 300px);
    height: 30px;
    border-bottom: 1px solid #dcdee5;
    margin-left: 300px;
}

.app-container {
    width: 100%;
    margin-top: 90px;
    /* overflow: hidden; */

    .app-side-nav {
        width: 300px;
        border-right: 1px solid #eee;
        position: fixed;
        bottom: 0;
        top: 62px;
        overflow: scroll;
        margin-bottom: 0;
        z-index: 1;
        background-color: #fff;
        padding-bottom: 80px;
        padding-top: 10px;
        overflow-x: hidden;
        @mixin scroller;
    }

    .app-content {
        width: calc(100% - 300px);
        min-width: 950px;
        position: relative;
        margin-left: 300px;
        padding: 0 170px;
        margin-bottom: 50px;
        position: relative;
        min-height: 700px;

        pre {
            margin: 12px 0;
        }
    }

    a {
        color: #3c96ff;
        text-decoration: none;
        cursor: pointer;
    }

    .example-link {
        margin-bottom: -1.5em;
    }

    .example-item {
        padding: 0 0 10px;
        width: 100%;
        min-height: 80px;

        &~.example-item {
            margin-top: 20px;
        }

        .inner {
            float: left;
            display: inline-block;
            margin-right: 20px;
        }
    }

    code {
        font-family: Menlo, Monaco, Consolas, Courier, monospace;
        background-color: rgba(27, 31, 35, 0.05);
        padding: 1px 5px;
    }

    h2,
    h3,
    h4,
    h5 {
        font-weight: 400;
        color: #1f2f3d;

        &:hover {
            .header-anchor {
                visibility: visible;
            }
        }
    }

    p {
        font-size: 14px;
        color: #5e6d82;
        line-height: 1.5em;
        margin: 12px 0;
    }

    h3 {
        margin: 35px 0 15px;
    }

    blockquote {
        color: #7f8fa4;
        font-size: inherit;
        padding: 8px 15px;
        margin: 16px 0;
        border-left: 3px solid #eaeaea;
        p {
            color: #7f8fa4 !important;
            margin: 0;
            line-height: 1.5;
        }
    }
    .tips-block {
        position: relative;
        &.with-title {
            &:before {
                content: "!";
                position: absolute;
                width: 19px;
                height: 19px;
                left: -11px;
                top: 13px;
                text-align: center;
                line-height: 21px;
                border-radius: 50%;
                color: #fff;
                font-size: 14px;
            }
        }
        &.tip,
        &.info,
        &.warning,
        &.danger {
            padding: 1px 15px;
            margin: 12px 0;
            border-left: 3px solid;
        }
        &.tip {
            background-color: #f3f5f7;
            border-color: #42b983;
            &:before {
                background-color: #42b983;
            }
        }
        &.info {
            background-color: rgba(225, 236, 255, 0.5);
            border-color: #699df4;
            &:before {
                background-color: #699df4;
            }
        }
        &.warning {
            background-color: rgba(255, 229, 100, 0.3);
            border-color: #b19300;
            color: #000;
            &:before {
                background-color: #b19300;
            }
        }
        &.danger {
            background-color: #ffe6e6;
            border-color: #f66;
            color: #000;
            &:before {
                background-color: #f66;
            }
        }
    }

    .header-anchor {
        float: left;
        margin-left: -20px;
        padding-right: 4px;
        visibility: hidden;
        padding-top: 1px;
    }

    .table {
        border-collapse: collapse;
        width: 100%;
        background-color: #fff;
        color: #5e6d82;
        font-size: 14px;
        margin-bottom: 12px;
        line-height: 1.5em;
    }

    .table td:first-child,
    .table th:first-child {
        padding-left: 10px;
    }

    .table td,
    .table th {
        padding: 0;
        border-bottom: 1px solid #eaeefb;
        padding: 10px;
        max-width: 300px;
        word-break: break-word;
    }

    .table th {
        text-align: left;
        border-top: 1px solid #eaeefb;
        background-color: #eff2f7;
    }

    .language-html,
    .language-css,
    .language-javascript,
    .language-bash,
    .language-js {
        display: block;
        line-height: 1.8;
        font-family: Menlo, Monaco, Consolas, Courier, monospace;
        font-size: 13px;
        padding: 10px;
        background-color: #f6f8fa;
        border-radius: 2px;
        border: 1px solid #e5e5e5;
    }

    ul {
        padding: 5px 20px 5px 20px;
        li {
            font-size: 14px;
            list-style: none;
            padding-left: 20px;
            padding-bottom: 5px;
            color: #333;
            word-break: break-all;
            &:before {
                content: "";
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background-color: #333;
                transform: translateX(-15px);
                display: inline-block;
                vertical-align: middle;
            }
        }
    }

    /* .language-html,
    .language-css,
    .language-javascript,
    .language-bash,
    .language-js {
        display: block;
        color: #888;
        line-height: 1.8;
        font-family: Menlo, Monaco, Consolas, Courier, monospace;
        font-size: 12px;
        padding: 15px;
        background-color: #f9fafc;
    }

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

    .hljs,
    .hljs-subst {
        color: #000
    }

    .hljs-addition,
    .hljs-meta,
    .hljs-string,
    .hljs-symbol,
    .hljs-template-tag,
    .hljs-template-variable {
        color: #756bb1
    }

    .hljs-comment,
    .hljs-quote {
        color: #636363
    }

    .hljs-bullet,
    .hljs-link,
    .hljs-literal,
    .hljs-number,
    .hljs-regexp {
        color: #31a354
    }

    .hljs-deletion,
    .hljs-variable {
        color: #88f
    }

    .hljs-built_in,
    .hljs-doctag,
    .hljs-keyword,
    .hljs-name,
    .hljs-section,
    .hljs-selector-class,
    .hljs-selector-id,
    .hljs-selector-tag,
    .hljs-strong,
    .hljs-tag,
    .hljs-title,
    .hljs-type {
        color: #3182bd
    }

    .hljs-emphasis {
        font-style: italic
    }

    .hljs-attribute {
        color: #e6550d
    } */

    /* .hljs {
        display: block;
        background: white;
        padding: 0.5em;
        color: #333333;
        overflow-x: auto;
        }

        .hljs-comment,
        .hljs-meta {
        color: #969896;
        }

        .hljs-string,
        .hljs-variable,
        .hljs-template-variable,
        .hljs-strong,
        .hljs-emphasis,
        .hljs-quote {
        color: #df5000;
        }

        .hljs-keyword,
        .hljs-selector-tag,
        .hljs-type {
        color: #a71d5d;
        }

        .hljs-literal,
        .hljs-symbol,
        .hljs-bullet,
        .hljs-attribute {
        color: #0086b3;
        }

        .hljs-section,
        .hljs-name {
        color: #63a35c;
        }

        .hljs-tag {
        color: #333333;
        }

        .hljs-title,
        .hljs-attr,
        .hljs-selector-id,
        .hljs-selector-class,
        .hljs-selector-attr,
        .hljs-selector-pseudo {
        color: #795da3;
        }

        .hljs-addition {
        color: #55a532;
        background-color: #eaffea;
        }

        .hljs-deletion {
        color: #bd2c00;
        background-color: #ffecec;
        }

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

@media screen and (max-width: 1291px) {
    .app-container {
        .app-content {
            padding: 0 60px;
        }
    }
}

@media screen and (min-width: 1291px) and (max-width: 1680px) {
    .app-container {
        .app-content {
            padding: 0 60px;
        }
    }
}