/* html-highlighter.css */

:root {
  --html-token-tag:        #800000;
  --html-token-attr-name:  #ff0000;
  --html-token-attr-value: #0000ff;
  --html-token-comment:    #008000;
  --html-token-doctype:    #888888;
  --html-token-entity:     #ff0000;
  --html-token-punct:      #333333;
  --html-token-default:    #1e1e1e;
}

html-highlighter {
  display:       block;
  background:    var(--editor-bg, #ffffff);
  border:        2px inset var(--editor-border);
  border-radius: var(--editor-radius, 12px);
  font-family:   var(--editor-font, 'JetBrains Mono', 'Fira Code', monospace);
  font-size:     var(--editor-font-size, 14px);
  line-height:   var(--editor-line-h, 20px);
  box-shadow:    0 2px 12px rgba(0,0,0,.08);
  position: relative;
  margin-top: 35px;
  width: fit-content;
}
html-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; }


html-highlighter editor-body {
  display: block;
}

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

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

html-highlighter token-tag,
html-highlighter token-attr-name,
html-highlighter token-attr-value,
html-highlighter token-comment,
html-highlighter token-doctype,
html-highlighter token-entity,
html-highlighter token-punct,
html-highlighter token-default {
  display: inline;
}

html-highlighter token-tag        { color: var(--html-token-tag);        }
html-highlighter token-attr-name  { color: var(--html-token-attr-name);  }
html-highlighter token-attr-value { color: var(--html-token-attr-value); }
html-highlighter token-comment    { color: var(--html-token-comment);    font-style: italic; }
html-highlighter token-doctype    { color: var(--html-token-doctype);    font-style: italic; }
html-highlighter token-entity     { color: var(--html-token-entity);     }
html-highlighter token-punct      { color: var(--html-token-punct);      }
html-highlighter token-default    { color: var(--html-token-default);    }