/* css-highlighter.css */

:root {
  --token-selector:   #0070c1;
  --token-property:   #0451a5;
  --token-value:      #098658;
  --token-unit:       #d16b00;
  --token-number:     #d16b00;
  --token-hex:        #811f3f;
  --token-string:     #a31515;
  --token-at-rule:    #7b4db3;
  --token-comment:    #008000;
  --token-punct:      #333333;
  --token-important:  #cd3131;
  --token-pseudo:     #0070c1;
  --token-var-func:   #0070c1;
  --token-default:    #1e1e1e;

  --editor-bg:        #ffffff;
  --editor-chrome-bg: #f3f3f3;
  --editor-border:    #dbdbdb;
  --editor-label-fg:  #aaaaaa;
  --editor-radius:    12px;
  --editor-font:      'JetBrains Mono', 'Fira Code', monospace;
  --editor-font-size: 14px;
  --editor-line-h:    20px;
}

css-highlighter {
  display:       block;
  background:    var(--editor-bg);
  border:        2px inset var(--editor-border);
  border-radius: var(--editor-radius);
  font-family:   var(--editor-font);
  font-size:     var(--editor-font-size);
  line-height:   var(--editor-line-h);
  box-shadow:    0 2px 12px rgba(0,0,0,.08);
  position: relative;
  margin-top: 35px;
  width: fit-content;
  tab-size: 4;
}
css-highlighter::before { content: attr(title); position: absolute; left: 1px; top: -35px; display: inline-block; font-size: 18px; text-decoration-color: rgb(10, 10, 10); text-decoration-style: double; text-decoration-line: underline; font-style: italic; }


editor-body {
  display:       block;
  border-radius: 0 0 var(--editor-radius) var(--editor-radius);
}

code-area {
  display:      block;
  padding:      14px 20px;
  overflow-x:   auto;
  unicode-bidi: plaintext;
}

code-line {
  display:      block;
  white-space:  pre;
  border-radius: 3px;
  padding:      0 4px;
  margin:       0 -4px;
  unicode-bidi: plaintext;
}
code-line:hover {
  background: rgba(0,0,0,.04);
}

token-selector, token-property, token-value,     token-unit,
token-number,   token-hex,      token-string,    token-at-rule,
token-comment,  token-punct,    token-important, token-pseudo,
token-var-func, token-default {
  display: inline;
}

token-selector  { color: var(--token-selector);  }
token-property  { color: var(--token-property);  }
token-value     { color: var(--token-value);     }
token-unit      { color: var(--token-unit);      }
token-number    { color: var(--token-number);    }
token-hex       { color: var(--token-hex);       }
token-string    { color: var(--token-string);    }
token-at-rule   { color: var(--token-at-rule);   font-style: italic; }
token-comment   { color: var(--token-comment);   font-style: italic; }
token-punct     { color: var(--token-punct);     }
token-important { color: var(--token-important); font-weight: 700;   }
token-pseudo    { color: var(--token-pseudo);    }
token-var-func  { color: var(--token-var-func);  }
token-default   { color: var(--token-default);   }