/* ===== コードの色分け（js/core/highlight.js が付ける class に対応） ===== */
.code-block {
  --t-tag: #7aa2ff;
  --t-attr: #8ce0d0;
  --t-string: #ffc98b;
  --t-comment: #6b7590;
  --t-punct: #8b93a7;
  --t-selector: #b6e07a;
  --t-prop: #7aa2ff;
  --t-value: #e6c18a;
  --t-number: #ff9e64;
  --t-color: #ff9e64;
  --t-func: #d7a7ff;
  --t-atrule: #f087b3;
}

.code-block .t-tag      { color: var(--t-tag); }
.code-block .t-attr     { color: var(--t-attr); }
.code-block .t-string   { color: var(--t-string); }
.code-block .t-doctype  { color: var(--t-comment); }
.code-block .t-comment  { color: var(--t-comment); font-style: italic; }
.code-block .t-punct    { color: var(--t-punct); }
.code-block .t-selector { color: var(--t-selector); }
.code-block .t-prop     { color: var(--t-prop); }
.code-block .t-value    { color: var(--t-value); }
.code-block .t-number   { color: var(--t-number); }
.code-block .t-color    { color: var(--t-color); }
.code-block .t-func     { color: var(--t-func); }
.code-block .t-atrule   { color: var(--t-atrule); font-weight: 700; }

/* 今そのボタンで切り替えている部分。色を潰さないよう、背景で示す */
.code-block .hl {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 212, 121, 0.16);
  box-shadow: inset 2px 0 0 #ffd479;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 入れ子（@media の中など）では二重に敷かない */
.code-block .hl .hl {
  padding: 0;
  background: none;
  box-shadow: none;
}