:root {
  --cell-width: 5rem;
  --cell-height: 4rem;
  --scenario-cell-height: calc(var(--cell-height) * 0.65);
  --difficulty-cell-height: calc(
    var(--cell-height) - var(--scenario-cell-height)
  );

  --break-size: calc(var(--cell-width) / 10);

  --border-width: 2px;
  --border-color: black;
  --border--solid: var(--border-width) solid var(--border-color);
  --border--dashed: var(--border-width) dashed var(--border-color);

  --cell-background-color--default: #f2f2f2;
  --cell-background-color-hover--default: #e6e6e6;
  --cell-background-color--yes: #c6e0b4;
  --cell-background-color-hover--yes: #bcd5ab;
  --cell-background-color--no: #ffcccc;
  --cell-background-color-hover--no: #f2c2c2;
}

body {
  margin: 0;
  padding: 0;
}

/* Table settings */

#tracker {
  border-collapse: collapse;
}

/* Standard cells */

#tracker th,
#tracker td {
  padding: 0;
  font-weight: normal;
}

#tracker th > div,
#tracker td > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  box-sizing: border-box;
  border-right: var(--border--solid);
  border-bottom: var(--border--solid);

  --cell-background-color: var(--cell-background-color--default);
  --cell-background-color-hover: var(--cell-background-color-hover--default);
  background-color: var(--cell-background-color);

  width: var(--cell-width);
  min-width: calc(10rem / var(--number-of-difficulties));
  height: var(--cell-height);
}

#tracker th > div {
  padding: calc(var(--cell-height) / 10) calc(var(--cell-width) / 10);
}

#tracker th > div > .subname {
  margin-top: 0.2rem;
  font-size: 0.7rem;
}

#tracker td > input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
  margin: 0;
}

#tracker td > div > label {
  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;

  width: 100%;
  height: 100%;

  font-size: calc(var(--cell-height) * 0.5);
}

#tracker td > input[type="checkbox"]:indeterminate + div > label::before {
  display: none;
}

#tracker td > input[type="checkbox"]:checked + div > label::before {
  -webkit-mask-image: var(--icon-yes);
  mask-image: var(--icon-yes);
}

#tracker
  td
  > input[type="checkbox"]:not(:checked):not(:indeterminate)
  + div
  > label::before {
  -webkit-mask-image: var(--icon-no);
  mask-image: var(--icon-no);
}

.keyboard-nav #tracker td > input[type="checkbox"]:focus + div {
  position: relative;
  background-color: var(--cell-background-color-hover);
}

.keyboard-nav #tracker td > input[type="checkbox"]:focus + div::before {
  --pseudo-outline-width: calc(var(--border-width) + 1px);
  --pseudo-outline-offset: calc(-1 * var(--pseudo-outline-width));
  position: absolute;
  top: var(--pseudo-outline-offset);
  right: var(--pseudo-outline-offset);
  bottom: var(--pseudo-outline-offset);
  left: var(--pseudo-outline-offset);
  border: calc(var(--pseudo-outline-width)) solid var(--outline-color);
  content: "";
}

@media (hover: hover) {
  #tracker td > input[type="checkbox"]:hover + div {
    background-color: var(--cell-background-color-hover);
  }
}

#tracker td > input[type="checkbox"]:checked + div {
  --cell-background-color: var(--cell-background-color--yes);
  --cell-background-color-hover: var(--cell-background-color-hover--yes);
}

#tracker td > input[type="checkbox"]:not(:checked):not(:indeterminate) + div {
  --cell-background-color: var(--cell-background-color--no);
  --cell-background-color-hover: var(--cell-background-color-hover--no);
}

/* Top left cells (Progress) */

#tracker thead > tr:first-child > th:first-child > div {
  flex-direction: column;
  padding-bottom: 0;
}

#tracker #total-percentage {
  font-size: 1.2rem;
}

#tracker #total-fraction > span::before {
  content: "(";
}

#tracker #total-fraction > span::after {
  content: ")";
}

#tracker thead #total-fraction {
  font-size: 0.75rem;
}

/* First row cells (Progress + Scenario) */

#tracker thead > tr:first-child > th > div {
  border-top: var(--border--solid);
  border-bottom: none;

  width: calc(var(--cell-width) * var(--number-of-difficulties));
  height: var(--scenario-cell-height);
}

/* Second row cells (Progress + Difficulty) */

#tracker thead > tr:nth-child(2) > th > div {
  height: var(--difficulty-cell-height);
  font-size: 0.75rem;
}

#tracker thead > tr:nth-child(2) > th:not(.block-end) > div {
  border-right: none;
}

/* First column cells (Progress + Hero) */

#tracker tr > th:first-child > div {
  border-left: var(--border--solid);
}

#tracker tbody > tr > th:first-child > div {
  width: calc(var(--cell-width) * var(--number-of-difficulties));
}

/* Body cells */

#tracker tbody > tr > td:not(.block-end) > div {
  border-right: var(--border--dashed);
}

/* Row and column breaks */

#tracker tr.row-break > th,
#tracker tr.row-break > td {
  padding-top: var(--break-size);
}

#tracker tr.row-break > th > div,
#tracker tr.row-break > td > div {
  border-top: var(--border--solid);
}

#tracker th.col-break,
#tracker td.col-break {
  padding-left: var(--break-size);
}

#tracker th.col-break > div,
#tracker td.col-break > div {
  border-left: var(--border--solid);
}