/*** text highlighting ***/

hl[purple], [finding-severity="Critical"].severity-highlight {
  /*--text-rgb: 166,0,255;*/
  --text-rgb: 0,0,0;
  --highlight-rgb: 166,0,255;
  --highlight-opacity: .3;
}

hl[red], [finding-severity="High"].severity-highlight {
  /*--text-rgb: 255,0,0;*/
  --text-rgb: 0,0,0;
  --highlight-rgb: 255,0,0;
  --highlight-opacity: .4;
}

hl[orange], [finding-severity="Moderate"].severity-highlight, [finding-severity="Medium"].severity-highlight {
  /*--text-rgb: 255, 89, 0;*/
  --text-rgb: 0,0,0;
  --highlight-rgb: 255, 150, 0;
  --highlight-opacity: .6;
}

hl[yellow], [finding-severity="Low"].severity-highlight {
  /*--text-rgb: 255, 145, 0;*/
  --text-rgb: 0,0,0;
  --highlight-rgb: var(--yellow-rgba);
  --highlight-opacity: .6;
}

hl[green], [finding-severity="Proactive"].severity-highlight {
  /*--text-rgb: 0,180,0;*/
  --text-rgb: 0,0,0;
  --highlight-rgb: 0,255,0;
  --highlight-opacity: .3;
}

hl[blue], [finding-severity="Informational"].severity-highlight {
  /*--text-rgb: 0,128,255;*/
  --text-rgb: 0,0,0;
  --highlight-rgb: 0, 191, 255;
  --highlight-opacity: .3;
}

hl[gray], hl[grey] {
  --text-rgb: 0,0,0;
  --highlight-rgb: 0,0,0;
  --highlight-opacity: .09;
}

hl[pink] {
  --text-rgb: 0,0,0;
  --highlight-rgb: 255,0,208;
  --highlight-opacity: .3;
}

hl[mono] {
  font-family: monospace;
  font-weight: 550;
  padding-left: .3em;
  padding-right: .3em;
}

/* all code */
code {
  font-family: monospace;
  overflow-wrap: break-word;
  color: #f8f8f2;
  background-color: rgb(0,0,0,.85);
}

/* inline code only */
:not(pre) > code {
  color: black;
  word-break: break-all;
  background-color: rgb(0,0,0,.09);
  padding-left: .4em;
  padding-right: .4em;
}

/* code block only */
pre > code {
  font-size: .9rem;
  width: 100%;
  padding: 1rem;
  border-radius: .5rem;
  white-space: pre-wrap;
  display: block;
  text-align: left;
}

/* inline code is also highlighted */
hl:not(hl[mono]), :not(pre) > code, .severity-highlight {

  --text-color: rgba(var(--text-rgb), 1);
  --border-color: rgba(var(--highlight-rgb), .3);
  --background-color: rgba(var(--highlight-rgb), var(--highlight-opacity));

  padding-left: .3em;
  padding-right: .3em;
  padding-top: .2em;
  padding-bottom: .2em;
  border-radius: .3em;
  font-weight: bold;

}

hl:not(hl[mono]), .severity-highlight {
  color: var(--text-color);
  background-color: var(--background-color);
}