.graph {
  --week-width: calc(var(--block-size, 10px) + var(--block-gap, 3px));

  @apply text-xs gap-1;

  display: inline-grid;
  grid-template-areas:
    'null months'
    'days blocks';
  grid-template-columns: auto 1fr;
}

.months {
  display: grid;
  grid-area: months;
  grid-template-columns:
    calc(var(--week-width) * 5) /* Jan */
    calc(var(--week-width) * 4) /* Feb */
    calc(var(--week-width) * 4) /* Mar */
    calc(var(--week-width) * 5) /* Apr */
    calc(var(--week-width) * 4) /* May */
    calc(var(--week-width) * 4) /* Jun */
    calc(var(--week-width) * 5) /* Jul */
    calc(var(--week-width) * 4) /* Aug */
    calc(var(--week-width) * 4) /* Sep */
    calc(var(--week-width) * 5) /* Oct */
    calc(var(--week-width) * 4) /* Nov */
    calc(var(--week-width) * 5) /* Dec */;
}

.days {
  grid-area: days;
}

.months,
.days {
  opacity: 0.5;
}

.blocks {
  grid-area: blocks;
  grid-auto-columns: var(--block-size, 10px);
  grid-auto-flow: column;
}

.grids li {
  border-radius: var(--block-round, 2px);
}

.grids li[data-level='-1'] {
  visibility: hidden;
}

.grids li[data-level='0'] {
  background-color: var(--level-0, #ebedf0);
}

.grids li[data-level='1'] {
  background-color: var(--level-1, #9be9a8);
}

.grids li[data-level='2'] {
  background-color: var(--level-2, #40c463);
}

.grids li[data-level='3'] {
  background-color: var(--level-3, #30a14e);
}

.grids li[data-level='4'] {
  background-color: var(--level-4, #216e39);
}

.days li {
  display: inline-flex;
  align-items: center;
}

.days li:nth-child(odd) {
  visibility: hidden;
}

.days,
.blocks {
  display: grid;
  grid-template-rows: repeat(7, var(--block-size, 10px));
  gap: var(--block-gap, 3px);
}
