@mixin chinese() {
    &.chinese {
        text-indent: 1.5em;
        font-weight: 300;
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        ol,
        ul,
        blockquote,
        details,
        summary,
        pre,
        .tabs {
            text-indent: 0;
        }
    }
}
.markdown-body {
    --color-base: #ef4444;
    --markdown-bg: white;
    --color-bg: #ff47479c;
    --color-light: #ef44441a;
    --color-extra: rgba(239, 68, 68, 0.3);
    --color-more: rgba(239, 68, 68, 0.4);
}

.markdown-body.green {
    background-color: var(--markdown-bg);
    @apply p-3 lg:p-6;

    strong {
        &::before{
            content: "『";
        }
        &::after{
            content: "』";
        }
        // color: #ff4d20;
    }

    /* 块/段落引用 */
    // blockquote {
    //     position: relative;
    //     // color: #555;
    //     font-weight: 400;
    //     border-left: 6px solid var(--color-base);
    //     padding-left: 1em;
    //     margin-left: 0;
    //     padding: 1em;
    //     background-color: var(--color-light);
    // }

    blockquote {
        position: relative;
        z-index: 600;
        padding: 20px 20px 15px 20px;
        line-height: 1.4 !important;
        background-color: rgba(239, 68, 68, 0.06);
        border-radius: .4em;
        > * {
            position: relative;
            &:first-child:before {
              content: '\201C';
              color: var(--color-light);
              font-size: 6.5em;
              font-weight: 700;
              transform: rotate(15deg) translateX(-10px);
              opacity: 1;
              position: absolute;
              top: -.4em;
              left: -.2em;    
              text-shadow: none;
              z-index: -10;
            }
          }
    }

    .tabs{
        margin-top: 0;
        margin-bottom: 1em;
    }

    /* 让链接在 hover 状态下显示下划线 */
    // a {
    //     color: var(--color-base);
    //     text-decoration: none;
    //     &:hover {
    //         text-decoration: underline;
    //     }
    // }
    a {
        position: relative;
        z-index: 10;
        transition: color 0.3s linear;
        cursor: pointer;
        font-weight: bolder;
        // text-decoration: underline #c7254e;
        text-decoration: none;
        color: var(--color-base);
        border-bottom: 1px solid currentColor;
        padding: 0 4px;
        &[data-footnote-backref],
        &[data-footnote-ref] {
            // text-decoration: none;
            border: none;
            &:hover {
                background: none;
                animation: none;
            }
        }
        &:hover {
            content: '';
            // text-decoration: none;
            border: none;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff4d20' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E")
                repeat-x 0 100%;
            background-size: 20px auto;
            animation: waveMove 1s infinite linear;
        }
        @keyframes waveMove {
            0% {
                background-position: 0 100%;
            }
            100% {
                background-position: -20px 100%;
            }
        }
    }

    // 由prism.scss处理了
    pre {
        background: var(--prism-background);
        font-size: var(--prism-font-size);
        //     /* border: 1px solid #ddd; */
        // padding: 1em 1.5em;
        display: block;
        -webkit-overflow-scrolling: touch;
    }

    pre,
    pre code {
        font-family: var(--prism-font-family);
    }

    //     /* 底部印刷体、版本等标记 */
    small,
        /* 图片说明 */
        figcaption {
        font-size: 0.75em;
        color: #888;
    }
    // .markdown-body {
    legend {
        color: #000;
        font-weight: inherit;
    }
    caption {
        color: #000;
        font-weight: inherit;
    }
    del {
        text-decoration: line-through var(--color-base) 2px;
    }
    code {
        color: rgb(45, 55, 72);
        background-color: rgba(160,174,192,0.25);
        font-family: inherit;
        font-size: 1em;
        // color: #ffffff;
        // background-color: #ff4c209c;
        border-radius: 4px;
        padding: 1px 6px;
        // font-size: 0.875em;
        // font-size: 1.0769em;
        // position: relative;
        // top: 0.1em;
        margin: 0 2px;
        vertical-align: bottom;
    }
    pre {
        code {
            padding: 0;
            font-size: inherit;
            font-weight: inherit;
            color: inherit;
            white-space: pre;
            background-color: transparent;
            vertical-align: baseline;
            border-radius: 0;
            margin: 0;
        }
    }
    table {
        width: 100%;
        display: table;
        border: 1px solid var(--color-light);
        tr:hover {
            background: var(--color-light);
        }
        &:hover{
            border: 1px solid var(--color-extra);
            th {
                border-right: 1px solid var(--color-extra);
                background: var(--color-extra);
                border-bottom: 1px solid var(--color-extra);
            }
            td {
                border-right: 1px solid var(--color-extra);
            }
            caption {
                border-right: 1px solid var(--color-extra);
            }
            thead {
                th {
                    background: var(--color-extra);
                }
            }
        }
        // table-layout: fixed;
        th {
            border-right: 1px solid var(--color-light);
            padding: 0.5em 1em;
            background: var(--color-light);
            border-bottom: 1px solid var(--color-light);
        }
        td {
            border-right: 1px solid var(--color-light);
            padding: 0.5em 1em;
        }
        caption {
            border-right: 1px solid var(--color-light);
            padding: 0.5em 1em;
            border-bottom: none;
        }
        thead {
            th {
                background: var(--color-extra);
            }
        }
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-top: 1.2em;
        margin-bottom: 0.6em;
        line-height: 1.35;
        position: relative;
    }
    h1 {
        font-size: 1.8em;
    }
    h2 {
        font-size: 1.6em;
    }
    h3 {
        font-size: 1.4em;
    }
    h4 {
        font-size: 1.2em;
    }
    h5 {
        font-size: 1em;
    }
    h6 {
        font-size: 1em;
    }
    
    ::-webkit-calendar-picker-indicator {
        filter: invert(50%);
    }
    em {
        // color: #000;
        font-weight: inherit;
        position: relative;
        &:after {
            position: absolute;
            top: 0.65em;
            left: 0;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            pointer-events: none;
            color: var(--color-base);
            content: '・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・';
        }
    }
    ul.toc {
        li {
            list-style-type: none;
            a {
                text-decoration: none;
                border: 0;
                list-style-type: none;
            }
        }
    }
    @include chinese;
}