design/styleguide/assets/style/merch.scss

main {
  max-width: 100%;
  height: 100vh;
  overflow: auto;
  padding: 0 1rem;

  > div#intro {
    position: sticky;
    left: 0;
  }
}

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

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

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

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

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

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

    &.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-2);

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

    &.filtered {
      display: none;
    }
  }

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

  th,
  td {
    padding: 0.25rem 0.5rem;
    border: solid 1px var(--color-shade-2);
    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-3);
        }
      }

      &.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-2);
      }

      &: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-3);
      }

      &.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;
      }
    }
  }
}

div.filterBox {
  border: solid 4px var(--color-foreground);
  margin: 2rem 0;
  padding: 1rem;
  position: relative;
  font-family: 'Departure Mono', ui-monospace, monospace;
  display: flex;
  flex-wrap: wrap;
  column-gap: 4rem;
  row-gap: 2rem;
  width: fit-content;

  &::before {
    content: 'filter';
    position: absolute;
    top: -0.6lh;
    background-color: var(--color-background);
    padding: 0 0.5rem;
  }

  > div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 1.2rem;

    label {
      display: flex;
      align-items: center;
      gap: 0.5rem;

      input[type='checkbox'] {
        appearance: none;
        background-color: var(--color-shade-1);
        margin: 0;
        color: currentColor;
        width: 1.8em;
        height: 1.8em;
        border: 0.3em solid var(--color-shade-4);
        border-radius: 0.15em;
        transform: translateY(-0.075em);
        position: relative;
        font-family: inherit;

        &::before {
          position: absolute;
          inset: 0;
          content: 'x';
          text-align: center;
          font-size: 1.2rem;
          line-height: 0.7;
          transform: scale(0);
          transition: 120ms transform ease-in-out;
        }

        &:checked::before {
          transform: scale(1);
        }
      }
    }
  }
}