table.repr.table.table-hover.table-striped.table-sm.table-responsive.small {
  /* Don't make rows wider than they need to be. */
  display: inline;
}

table > tbody > tr.repr-element > td {
  /* Apply a tighter layout to the table cells. */
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  padding-right: 1rem;
}

table > tbody > tr > td.repr-section-toggle-col {
  /* Remove background and border of the first cell in every row
     (this row is only used for the collapse / uncollapse caret)

     TODO: Need to find a good solution for VS Code that works in both
           light and dark mode. */
  border-color: transparent;
  --bs-table-accent-bg: transparent;
}

tr.repr-section-header {
  /* Remove stripes from section header rows */
  background-color: transparent;
  border-color: transparent;
  --bs-table-striped-bg: transparent;
  cursor: pointer;
}

tr.repr-section-header > th {
  text-align: left !important;
  vertical-align: middle;
}

.repr-element, tr.repr-element > td {
  opacity: 1;
  text-align: left !important;
}

.repr-element-faded {
  transition: 0.3s ease;
  opacity: 0.2;
}

.repr-element-collapsed {
  display: none;
}

/* Collapse / uncollapse button and the caret it contains. */
.repr-section-toggle-col button {
  cursor: pointer;
  width: 1rem;
  background-color: transparent;
  border-color: transparent;
}

span.collapse-uncollapse-caret {
  width: 1rem;
  height: 1rem;
  display: block;
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
}

/* The collapse / uncollapse carets were copied from the free Font Awesome collection and adjusted. */

/* Default to black carets for light mode */
.repr-section-toggle-col > button.collapsed > span.collapse-uncollapse-caret {
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="black" d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');
}

.repr-section-toggle-col
  > button:not(.collapsed)
  > span.collapse-uncollapse-caret {
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="black" d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>');
}

/* Use white carets for dark mode */
@media (prefers-color-scheme: dark) {
  .repr-section-toggle-col > button.collapsed > span.collapse-uncollapse-caret {
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="white" d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');
  }

  .repr-section-toggle-col
    > button:not(.collapsed)
    > span.collapse-uncollapse-caret {
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="white" d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>');
  }
}

.channel-names-btn {
  padding: 0;
  border: none;
  background: none;
  text-decoration: underline;
  text-decoration-style: dashed;
  cursor: pointer;
  color: #0d6efd;
}

.channel-names-btn:hover {
  color: #0a58ca;
}