/* Table styles. */
.table-container {
  --hover-border-width: 5px;
  --hover-border-color: white;
  --sidebar-width: 250px;

  flex-grow: 1;
  margin-top: 25px; /* Height of the "x axis colors" <label>. */
}

table {
  border-spacing: 0;
  font-size: 14px;
  forced-color-adjust: none;
}

td, th {
  padding: 15px;
  text-align: start;
  transition: color 0.2s;
  vertical-align: baseline;
}

td:hover {
  color: var(--hover-text-color);
}

td:focus {
  outline: 2px solid var(--hover-text-color);
  outline-offset: -8px;
}

th {
  background-color: var(--color);
  color: var(--text-color);
}

td {
  background-color: var(--color-1, white);
  color: var(--color-2);
  cursor: pointer;
}

tr:first-child th span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

tr:first-child {
  position: sticky;
  top: 0;
  z-index: 3;
}

tr:first-child :is(th, td) {
  border-bottom: solid 1px white;
}

tr:first-child td:first-child {
  forced-color-adjust: auto;
}

:is(td, th):first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: solid 1px white;
}

/* Crosshair on hover styles. */
tr :is(th, td),
:is(th, td) {
  position: relative;
}

:is(th, td):before,
tr :is(th, td):after {
  content: "";
  position: absolute;
  background: var(--hover-border-color);
  mix-blend-mode: difference;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s;
}

:is(th, td):before {
  right: 0;
  top: 0;
  width: var(--hover-border-width);
  height: 100%;
}

tr :is(th, td):after {
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--hover-border-width);
}

:is(th, td).is-highlighted:before,
tr:hover :is(th, td):after {
  opacity: 1;
}

.color-name {
  font-size: 16px;
}

dialog#popover {
  position: fixed;
  inset: 2rem 2rem auto auto;
  z-index: 4; /* display above table headers */
}