#calendar-heatmap {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  padding: 8px;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.calendar-heatmap__months,
.calendar-heatmap__body {
  display: grid;
  column-gap: 3px;
  min-width: max-content;
}

.calendar-heatmap__months {
  margin-left: 34px;
  height: 18px;
  font-size: 12px;
  color: var(--bs-secondary-color);
}

.calendar-heatmap__month { white-space: nowrap; }

.calendar-heatmap__weekdays {
  display: grid;
  grid-template-rows: repeat(7, 14px);
  row-gap: 3px;
  font-size: 11px;
  color: var(--bs-secondary-color);
  text-align: right;
}

.calendar-heatmap__weekdays span {
  padding-right: 5px;
  line-height: 14px;
}

.calendar-heatmap__days {
  display: grid;
  grid-template-rows: repeat(7, 14px);
  grid-auto-flow: column;
  grid-auto-columns: 14px;
  gap: 3px;
}

.calendar-heatmap__day {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #ebedf0;
  outline: 1px solid transparent;
}

.calendar-heatmap__day:hover,
.calendar-heatmap__day:focus-visible { outline-color: #57606a; }

.calendar-heatmap__day[data-level="1"] { background: #9be9a8; }
.calendar-heatmap__day[data-level="2"] { background: #40c463; }
.calendar-heatmap__day[data-level="3"] { background: #30a14e; }
.calendar-heatmap__day[data-level="4"] { background: #216e39; }

[data-bs-theme="dark"] .calendar-heatmap__day { background: #161b22; }
[data-bs-theme="dark"] .calendar-heatmap__day[data-level="1"] { background: #0e4429; }
[data-bs-theme="dark"] .calendar-heatmap__day[data-level="2"] { background: #006d32; }
[data-bs-theme="dark"] .calendar-heatmap__day[data-level="3"] { background: #26a641; }
[data-bs-theme="dark"] .calendar-heatmap__day[data-level="4"] { background: #39d353; }