/*
 * Copyright (c) Baidu, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import (reference) "tokens.less";
@markdownsdk: .marklang;

.@{prefix}-markdown {
    @{markdownsdk} {
        code {
            .cos-color-text();
            background: var(--cos-color-border-minor);
        }

        pre {
            .cos-rounded-sm();

            code {
                .cos-rounded-none();
                .cos-space-p-none();
                white-space: pre;
                background: none;
            }

            .code-header {
                .cos-color-bg-dent();
            }
        }

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

        .hljs-doctag,
        .hljs-formula,
        .hljs-keyword {
            color: var(--cos-violet-1);
        }

        .hljs-deletion,
        .hljs-name,
        .hljs-section,
        .hljs-selector-tag,
        .hljs-subst {
            .cos-color-text-alive();
        }

        .hljs-literal {
            color: var(--cos-ocean-1);
        }

        .hljs-addition,
        .hljs-attribute,
        .hljs-meta .hljs-string,
        .hljs-regexp,
        .hljs-string {
            color: var(--cos-green-2);
        }

        .hljs-attr,
        .hljs-number,
        .hljs-selector-attr,
        .hljs-selector-class,
        .hljs-selector-pseudo,
        .hljs-template-variable,
        .hljs-type,
        .hljs-variable {
            color: var(--cos-yellow-2);
        }

        .hljs-bullet,
        .hljs-link,
        .hljs-meta,
        .hljs-selector-id,
        .hljs-symbol,
        .hljs-title {
            .cos-color-text-primary();
        }

        .hljs-built_in,
        .hljs-class .hljs-title,
        .hljs-title.class_ {
            color: var(--cos-yellow-1);
        }

        .hljs-emphasis {
            font-style: italic
        }

        .hljs-strong {
            font-weight: 700
        }
    }
}

@{dark-selectors} {
    .@{prefix}-markdown {
        @{markdownsdk} {
            pre {
                background: rgba(34, 34, 34, 0.5);
            }
        }
    }
}