/*
    Name:     Kimbie (dark)
    Author:   Jan T. Sott
    License:  Creative Commons Attribution-ShareAlike 4.0 Unported License
    URL:      https://github.com/idleberg/Kimbie-highlight.js
*/

/* 新添加的內容
  ------------------------------------- 
  --hl-color                  代碼框字體顔色 【必須】 (把下面.hljs的 color複製到這裏來)
  --hl-bg                     代碼框背景色 【必須】 (把下面.hljs的 background複製到這裏來)
  --hltools-bg: #321a0f       代碼框頂部工具欄背景色 【可選】(如果你關掉了 copy、lang 和 shrink,可不用配置這個）
  --hltools-color: #fff       代碼框頂部工具欄字體顔色 【可選】(如果你關掉了 copy、lang 和 shrink,可不用配置這個）
  --hlnumber-bg: #221a0f      代碼框行數背景色 【可選】(如果已經關掉 line_number,可以不用配置這個)
  --hlnumber-color: #fff      代碼框行數字體顔色 【可選】 (如果已經關掉 line_number,可以不用配置這個)
  --hlscrollbar-bg: #d3af86   代碼框滾動條顔色 【可選】（默認為主題主顔色）
  --hlexpand-bg: #d3af86      代碼框底部展開背景色 【可選】(如果已經關掉 highlight_height_limit,可以不用配置這個)
*/

:root {
    --hl-color: #d3af86;
    --hl-bg: rgba(255, 255, 255, 0.25);
    --hltools-bg: ;
    --hltools-color: #fff;
    --hlnumber-bg: transparent;
    --hlnumber-color: #fff;
    --hlscrollbar-bg: #fff;
    --hlexpand-bg: rgba(255, 255, 255, 0.15);
}

/* 代码块自定义样式 */
.highlight {
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 0.8rem !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.1),
        0 10px 20px rgba(0, 0, 0, 0.1) !important;
    /* backdrop-filter: blur(1px) saturate(170%);
    -webkit-backdrop-filter: blur(1px) saturate(170%); */
}

.container .highlight-tools {
    background: rgba(255, 255, 255, 0.4);
}

.container figure.highlight table td.gutter pre,
.container figure.highlight table td.code pre {
    background: transparent !important;
}

.code-expand-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(1px) saturate(170%);
    -webkit-backdrop-filter: blur(1px) saturate(170%);
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.1),
        0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="dark"] .highlight {
    background: rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .container .highlight-tools {
    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .code-expand-btn {
    background: rgba(0, 0, 0, 0.15) !important;
}


/* Kimbie Comment */
.hljs-comment,
.hljs-quote {
    color: #b7b7b7;
}

/* Kimbie Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-meta {
    color: #ff657f;
}

/* Kimbie Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-deletion,
.hljs-link {
    color: #ffae51;
}

/* Kimbie Yellow */
.hljs-title,
.hljs-section,
.hljs-attribute {
    color: #ff885d;
}

/* Kimbie Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
    color: #b3e766;
}

/* Kimbie Purple */
.hljs-keyword,
.hljs-selector-tag,
.hljs-function {
    color: #76d8ff;
}

/* 更改的內容 把.hljs改為 #article-container figure.highlight .hljs *、
/* ------------------------------------- */
#article-container figure.highlight .hljs {
    display: block;
    overflow-x: auto;
    color: #ffffff;
    padding: 0.5em;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] #article-container figure.highlight .hljs {
    background: transparent;
}

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

.hljs-strong {
    font-weight: bold;
}