:root {
  --cell-size: 28px;
}

.grid-with-labels {
  display: grid;
  grid-template-columns: repeat(2, fit-content);
}

.col-labels {
  grid-column: 2;
}
.row-labels {
  grid-column: 1;
}

.grid-with-labels .cell {
  user-select: none;
}

.label {
  font-weight: 600;
  font-size: 14px;
}
  
.grid {
  --bc: black;
  grid-column: 2 / 2;
  width: min-content;
  height: min-content;
}

/* -- ROW STYLES -- */
.row {
  display: flex;
}

/* -- CELL STYLES -- */
.cell {
  display: inline-block;
  height: var(--cell-size);
  width: var(--cell-size);
  border: 1px solid var(--bc);
  box-sizing: border-box;
  background-color: white;
}

.cell:hover {
  border: 2px solid #ff4c6f !important;
}

/*
-- cell states
0 = empty
1 = mark
2 = reserved (not in use)
3 = fill
*/
.cell[state="1"] {
  background-image: url("mark.svg");
  background-size: 20px;
  background-position: center;
}

.cell[state="3"] {
  background: linear-gradient(blue, slateblue, lightblue);
}

.crossed {
  color: gray;
}

/* border color stuff */
.row .cell:nth-of-type(2) {
  border-left: 2px solid var(--bc);
}

.row:nth-of-type(2) .cell {
  border-top: 2px solid var(--bc);
}

.row .cell:last-of-type {
  border-right: 2px solid var(--bc);
}

.row:last-of-type .cell {
  border-bottom: 2px solid var(--bc);
}

.label {
  padding-right: 8px;
  padding-left: 4px;
  text-align: right;
  letter-spacing: 0.2em;
  min-height: var(--cell-size);
}

.row-labels .label-text > span {
  margin-left: 4px;
}

/* keep the border of the grid in mind */
.col-labels .label:first-child {
  max-width: calc(1px + var(--cell-size));
  width: calc(1px + var(--cell-size));
}

.row-labels .label:first-child {
  height: calc(1px + var(--cell-size));
}

.col-labels .label:nth-of-type(2n + 1) {
  background: linear-gradient(transparent, var(--color) 48px);
/*   background-color: lightblue; */
}

.row-labels .label:nth-child(2n + 1) {
  background: linear-gradient(to right, transparent, var(--color) 48px);
}

.row:last-of-type .label {
  border-bottom: none;
}

.row-labels .label {
  display: flex;
  justify-content: end;
  align-items: center;
  padding-left: 24px;
}


.col-labels {
  display: flex;
  height: fit-content;
  display: flex;
}

.col-labels .label {
  padding-top: 24px;
  display: flex;
  align-items: end;
  justify-content: center;
  word-break: break-all;
  width: var(--cell-size);
  max-width: var(--cell-size);
  box-sizing: border-box;
  border: none;
  padding-bottom: 4px;
  padding-right: 6px;
  padding-left: 6px;
  text-align: right;
}

.col-labels .label-text {
  text-align: center;
  display: flex;
  flex-direction: column;
}

.grid {
  font-size: 0;
  /*max-width: calc(var(--cols) * var(--cell-size));*/
  border: 1px solid var(--bc);
  display: grid;
  grid-template-columns: repeat(var(--cols), min-content);
}

.row-labels-grid-container {
  display: flex;
}

@media screen and (max-width: 450px) {
  :root {
    --cell-size: 38px;
  }
  
  .container {
    overflow: scroll;
  }
  
  .grid {
    margin-left: -2px;
    margin-top: -2px;
  }
  
  .cover {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 2;
  }
  
  .cover:after {
    content: "";
    display: block;
    width: 2px;
    height: 2px;
    background-color: black;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  
  .row-labels {
    position: sticky;
    left: 0;
    background-color: #f1effc;
    border-right: 2px solid black;
    padding-left: 2px;
    margin-top: -2px;
  }
  
  .row-labels .label {
    padding-left: 0;
  }
  
  .col-labels .label:nth-child(2n), .cover {
    background: linear-gradient(white, #f1effc 64px, #e4e0f6 90%);
  }
  
  .col-labels {
    margin-left: -2px;
    position: sticky;
    width: min-content;
    border-bottom: 2px solid black;
    background-color: #f1effc;
    top: 0;
    z-index: 1;
  }
}