main {
  max-width: 100%;
  height: 100vh;
  overflow: auto;
}

.table-container {
  overflow-x: auto;
  width: 100%;
}

table {
  user-select: none;
  width: fit-content;
  border-collapse: collapse;
  border: solid 4px var(--color-shade-3);

  thead {
    position: sticky;
    top: calc(-1rem + 2px);
    z-index: 10;
    background-color: var(--color-background);
    outline: solid 4px var(--color-shade-3);
    outline-offset: -2px;

    tr > th {
      outline: solid 1px var(--color-shade-3);

      &.hover {
        background-color: var(--color-shade-4);
      }
    }

    tr:first-child > th[colspan='15'] {
      background-color: var(--color-shade-3);
    }

    &.currentEvent {
      tr > th {
        outline-color: var(--color-primary);
      }

      outline-color: var(--color-primary);

      tr:first-child > th {
        background-color: var(--color-primary);
      }
    }
  }

  tbody {
    border-top: solid 4px var(--color-shade-3);

    &.currentEvent {
      border: solid 4px var(--color-primary);
    }
  }

  tbody > tr > th,
  thead > tr > th,
  td {
    text-align: center;
  }

  th,
  td {
    padding: 0.25rem 0.5rem;
    border: solid 1px var(--color-shade-3);
    min-width: 6ch;

    &.hover {
      background-color: var(--color-shade-1);
    }
  }

  td {
    &.val {
      font-family: "Departure Mono", ui-monospace, monospace;

      &.hover {
        background-color: transparent;
      }

      &:not(.empty) {
        cursor: pointer;

        &.hover {
          background-color: var(--color-shade-1);
        }

        &:hover {
          background-color: var(--color-shade-4);
        }
      }

      &.highlighted {
        &[data-dim="A"] {
          background-color: rgb(96, 165, 249);
        }

        &[data-dim="B"] {
          background-color: rgb(211, 129, 247);
        }

        &[data-dim="C"] {
          background-color: rgb(255, 121, 117);
        }
      }

      &.currentDimension:not(.hover) {
        background-color: var(--color-shade-3);
      }

      &:not([data-diff=''])::after {
        content: attr(data-diff);
        display: block;
        font-size: 0.8em;
        background-color: var(--custom-color);
        width: calc(100% + 1rem);
        height: 1lh;
        position: relative;
        left: -0.5rem;
        top: 0.25rem;
        margin-top: -0.25rem;
      }

      &[data-diff='']::after {
        content: '';
        display: block;
        font-size: 0.8em;
        background-color: transparent;
        width: calc(100% + 1rem);
        height: 1lh;
        position: relative;
        left: -0.5rem;
        top: 0.25rem;
        margin-top: -0.25rem;
      }
    }

    &.dimension {
      &.hover {
        background-color: var(--color-shade-4);
      }

      &.currentDimension::after {
        content: '>';
        /*color: var(--color-secondary);*/
        font-family: "Departure Mono", ui-monospace, monospace;
        position: relative;
        right: calc(-0.5rem - 0.5ch);
        margin-left: -1ch;
        font-weight: bold;
      }
    }
  }
}