.badge {
  display: inline-block;
  padding: 0.25em 0.4em 0.16em;
  font-size: 82%;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: bottom;
  border-radius: 0.25rem;
  color: var(--color-secondary-fg);
  background-color: var(--color-secondary-bg);
}

.expand-all {
  margin-bottom: 0.5em;
}

.file-link {
  &.lpad { margin-left: 0.33em; }
  i {
    margin-right: 0;
    vertical-align: baseline;
  }
}

.hasTooltip:not(a),
*[title]:not(a) {
  cursor: help;
  &:hover {
    background: color-mix(in lch, var(--color-button-fg) 20%, transparent);
  }
}

*[data-toggle] {
  cursor: pointer !important;
}

.string-encoded {
  &.tabs-container {
    > i {
      line-height: 20px;
      margin-right: 0;
    }
  }
  &[data-type=base64] > .string-raw .t_string {
    font-family: monospace;
  }
}

.prettified { color: var(--color-prettified); }
.timestamp { color: var(--color-timestamp); }

.binary {
  padding: 0 0.3em;
}

.char-ws,
.maxlen,
.unicode {
  padding: 0 0.3em;
  // match a:hover (found in base.scss
  cursor: pointer;
  &:hover {
    outline: 0;
    color: var(--color-a-hover);
  }
}
.binary {
  background-color: var(--color-binary-bg);
  color: var(--color-binary-fg);
  font-family: monospace !important;
  font-weight: bold;
}

/*
char-control is a single "control picture" / replacement character
https://www.compart.com/en/unicode/block/U+2400
which displays very small
use ::after pseudo element to replace the char with abbreviation
*/
.char-control[data-abbr] {
  display: inline-block;
  text-indent: -9999px;
  line-height: 0;  // #reasons
  margin: 0 0.15em;
}
.char-control[data-abbr]::after {
  content: attr(data-abbr);
  display: block;
  text-indent: 0;

  line-height: 1.25em;
  position: relative;
  top: -0.25em;
  font-size: 0.66em;

  padding: 0.05em 0.5em 0;
  background-color: silver;
  color: var(--color-binary-fg);
  font-family: monospace !important;
}

.maxlen {
  color: var(--color-warn-fg);
  background-color: var(--color-warn-bg);
}
.char-ws,
.unicode {
  background-color: var(--color-unicode-bg);
  font-weight: normal; // many chars don't render as bold
}

ul[data-type-more=binary] > li.t_string {
  &::before { content: ""; }
  &::after { content: ""; }
  > .binary {
    padding: 0;
    margin: 0;
    word-spacing: -0.25em;
    font-size: 0.8em;
  }
  text-indent: 0;
  padding: 0;
}

//
// Whitespace
//
.ws_s,
.ws_t,
.ws_r,
.ws_n { opacity: 0.33; }
.char-ws {
  .ws_s, .ws_t, .ws_r, .ws_n { opacity: revert; }
}
.ws_s::before {
  content: "\00B7";  // middle dot
}
.ws_t::before {
  display: inline-block;
  content: "\203A"; // &rsaquo;
  width: 1em;
}
.ws_r::before { content: "\\r"; }
.ws_n::before { content: "\\n"; }
