@import "../static/style/public.less";
@import "../static/style/prism.css";
@import "../../../packages/arcodesign/style/mixin.less";
@import "../../../packages/arcodesign/style/public.less";

body {
    background-color: var(--background-color);
    &[arco-theme=dark] {
        background-color: var(--dark-background-color);
    }
}

.arcodesign-pc-site-wrap {
    height: 100%;

    .arco-resource .demo-nav-intro {
        min-height: auto;
    }
    // 示例简介

    .demo-nav-intro,
    .demo-doc-intro {
        min-height: 194px;
        padding: 36px 56px 20px;
        width: 100%;

        .demo-comp-type,
        .demo-doc-type {
            line-height: 20px;
            .use-var(color, sub-info-font-color);

            .separator {
                .use-var(color, sub-info-font-color);
                padding: 0 5px;
                font-weight: 900;
            }

            strong {
                .use-var(color, font-color);
                font-weight: 600;
            }
        }

        .demo-comp-name,
        .demo-doc-name {
            margin: 20px 0 0;
            font-size: 36px;
            font-weight: 500;
            .use-var(color, font-color);
        }

        .demo-comp-desc,
        .demo-doc-desc {
            .use-var(color, sub-font-color);
            margin-top: 12px;
            line-height: 20px;
        }
    }
    // 开发指南主体部分

    .demo-doc-description {
        padding: 0 43px 140px 56px;
        .use-var(color, font-color);
        width: 100%;
        flex: 1;

        &.no-padding {
            padding: 0;
        }

        h1,
        h2 {
            margin: 24px 0 16px;
        }

        h3 {
            margin: 12px 0;
        }

        p,
        ul {
            margin: 12px 0;
            font-size: 14px;
            line-height: 1.5;
            .use-var(color, sub-font-color);
        }

        li {
            margin-bottom: 12px;
        }

        .demo-code-content {
            font-family: Menlo, Consolas;
            font-size: 12px;
            .use-var(color, sub-font-color);
            .use-var(background-color, lighter-line-color);
            border-radius: 3px;
            line-height: 1.45;
            padding: 24px;
            margin: 16px 0;
            border: 1px solid;
            .use-var(border-color, line-color);

            .demo-code {
                white-space: pre-wrap;
            }
        }
    }

    .pc-site-wrapper {
        flex: 1;

        a {
            color: @primary-color;
        }

        h2 > code,
        p > code {
            .use-var(background-color, lighter-line-color);
            .use-var(color, sub-font-color);
            border-radius: 2px;
            padding: 3px 8px;
            margin: 0 2px;
        }
        p > code {
            font-size: 12px;
            line-height: 14px;
        }
    }
    // 组件主体部分

    .pc-site-content {
        padding: 0 43px 140px 56px;
        .use-var(color, font-color);
        width: 100%;

        .demo-code-wrapper {
            .arco-tabs-content {
                padding-top: 0;
            }

            .demo-code-title {
                &:nth-child(n + 2) {
                    margin-top: 24px;
                }
                font-size: 20px;
                margin-bottom: 12px;
                font-weight: 500;
            }

            .demo-code-desc {
                line-height: 1.5;
                .use-var(color, sub-font-color);
            }

            .demo-code-content {
                position: relative;
                overflow: hidden;
                max-height: 240px;
                .use-var(background-color, card-background-color);

                .demo-code {
                    .use-var(color, sub-font-color);
                    width: 100%;
                    display: block;
                    word-break: normal;
                    padding: 12px 24px;
                    overflow-x: auto;
                    overflow-y: hidden;
                    font-size: 13px;
                    line-height: 22px;
                    font-family: Menlo, Consolas;
                    box-sizing: border-box;
                    white-space: pre-wrap;
                }
            }
        }

        .demo-code-title {
            &:nth-child(n + 2) {
                margin-top: 20px;
            }
        }

        .demo-props,
        .token-page-table-wrap {
            padding-top: 24px;

            .demo-attr {
                font-size: 20px;
                font-weight: 500;
                line-height: 28px;
                .use-var(color, font-color);
                margin-top: 24px;
            }

            .demo-desc {
                margin-top: 12px;
                font-size: 14px;
                .use-var(color, sub-font-color);
            }
            // 属性说明的表格

            table {
                text-align: left;
                width: 100%;
                border-radius: 0 0 2px 2px;
                border: 1px solid;
                .use-var(border-color, line-color);
                .use-var(color, font-color);
                font-size: 13px;
                margin-top: 24px;

                thead {
                    .use-var(background-color, lighter-line-color);

                    th {
                        font-weight: 500;
                        white-space: nowrap;
                        border-bottom: 1px solid;
                        .use-var(border-bottom-color, line-color);

                        &:not(:last-of-type) {
                            border-right: 1px solid;
                            .use-var(border-right-color, line-color);
                        }
                    }
                }

                tbody {
                    .use-var(background-color, background-color);

                    tr {
                        border-bottom: 1px solid;
                        .use-var(border-bottom-color, line-color);
                    }
                }

                th,
                td {
                    padding: 11px 24px;
                    max-width: 300px;
                }

                th {
                    &.props-names {
                        width: 22%;
                    }

                    &.props-type {
                        width: 28%;

                        &:last-child {
                            width: 50%;
                        }
                    }
                }

                td.special {
                    .use-var(color, primary-color);
                }
            }

            pre {
                .use-var(background-color, card-background-color);
                border: 1px solid;
                .use-var(border-color, line-color);
                padding: 12px 20px;
                overflow: auto;
                margin-top: 24px;
            }

            code {
                line-height: 22px;
                font-size: 13px;
                font-family: Menlo, Consolas;
                white-space: pre-wrap;
                word-break: normal;
            }
        }

        // 示例标题、示例属性说明标题
        .demo-title {
            margin-top: 20px;
            font-size: 18px;
            line-height: 28px;
            font-weight: bold;
            border-radius: 2px 2px 0 0;
        }

        .demo-desc code,
        td code {
            // 描述文字中的内嵌code
            .use-var(background-color, lighter-line-color);
            padding: 0 8px;
            font-size: 13px;
            display: inline-block;
            line-height: 22px;
            .use-var(color, sub-font-color);
            margin: 0 2px;
            border-radius: 2px;
        }

        td code {
            margin-bottom: 2px;
        }
        // 示例代码的容器

        .demo-content {
            .use-var(background-color, card-background-color);
            padding: 24px 28px;
            border-radius: 0 0 2px 2px;

            pre {
                overflow-x: auto;
            }
        }

        .demo-desc + .demo-content {
            margin-top: -2px;
        }

        .demo-title + .demo-desc {
            padding-top: 0;
            margin-top: -16px;
        }
    }
}

.arco-menu-group .arco-menu-group-title {
    .arco-menu-indent {
        width: 0;
    }
}
