:host{
  font-family: monospace;
  white-space: pre-wrap;
  display: block;
}
:host(.inline){
  display: inline-block;
}
:host(.nowrap){
  white-space: pre;
  overflow-x: auto;
}
:host([data-name]){
  --copy-button-top: 1.5em;
}
:host(.inline.copy-able){
  --copy-button-block-padding: 0;
  --codeblock-inline-padding: 40px;
}
caption{
  text-align: start;
  padding-inline-start: 3em;
}
caption:empty{
  display: none;
}
.outerBox{
  position: relative;
  overflow: hidden;
}
table{
  border: 1px solid;
  border-collapse: collapse;
  border-spacing: 0px;
  width: 100%;
  margin-inline-end: var(--codeblock-inline-padding,0);
}
tbody{
  counter-reset: nlines 0;
  color: lightblue;
  background-color: rgb(40,37,43);
}
@keyframes hide-show{
  0%{ opacity: 0 }
  10%{ opacity: 1 }
  90%{ opacity: 1 }
  100%{ opacity: 0 }
}
.copy-button::before{
  content: "Copy"
}
.copy-button.copy-success::before{
  white-space:nowrap;
  content: "Copied";
  pointer-events: none;
  animation: hide-show 2s linear forwards;
}
.copy-button{
  padding: var(--copy-button-block-padding,0.3em) 0.3em;
  opacity: 0.5;
  color: silver;
  border: 1px solid rgba(230,230,230,0.3);
  position: absolute;
  margin-top: var(--copy-button-top,0.3em);
  right: .3em;
  cursor: pointer
}
.copy-button.copy-success,
.copy-button:hover{
  background-color: dodgerblue;
  color: black;
  opacity: 1;
}

.line-number{
  border-inline-end: 1px solid;
  background-color: rgba(0,0,0,0.1);
  color: silver;
  vertical-align: top;
  width: 0;
  text-align: end;
  user-select: none;
}

@media screen and (prefers-color-scheme: dark){
  tbody{
    /* We're cool and assume dark mode by default */
  }
}
tr{
  counter-increment: nlines;
}
td,tr{
  border-block: none;
}
td{
  padding: 1px 0.7em;
}
.line-number::before{
  content: counter(nlines)
}
a{
  color: dodgerblue;
}
a:visited{
  color: orchid
}
tbody > div{ display: contents }

.value,
.function{
  word-break: break-word;
}
/* These should really be moved into separate highlighter css */
.comment{ color: rgb(50,180,90) }
.selector{ color: lavenderblush }
.pseudo{ color: rgb(200,180,250) }
.id{ color: rgb(240, 148, 138) }
.class{ color: aquamarine }
.attribute{ color: rgb(100,200,250) }  
.atrule{ color: lime }
.atvalue{ color: lightblue }
.property{ color: palegoldenrod }
.value{ color: skyblue }
.curly{ color: chocolate }
.function{ color: silver }
.important-tag{ color: orange }
.quote{ color: burlywood }