.github-calendar-card {
  display: block !important;
  height: auto !important;
  padding: 20px 24px !important;
}

.github-calendar__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}

.github-calendar__title {
  margin: 0;
  color: var(--text-highlight-color);
  font-size: 1.1em;
  font-weight: 600;
}

.github-calendar__profile {
  color: var(--theme-color);
  font-size: 0.92em;
}

.github-calendar__summary {
  margin-left: auto;
  color: var(--font-color);
  font-size: 0.86em;
  opacity: 0.72;
  white-space: nowrap;
}

.github-calendar__scroll {
  overflow-x: auto;
  padding-bottom: 6px;
}

.github-calendar__canvas {
  --github-calendar-cell-size: 12px;
  --github-calendar-gap: 3px;
  width: max-content;
}

.github-calendar__months,
.github-calendar__grid {
  display: grid;
  grid-template-columns: repeat(53, var(--github-calendar-cell-size));
  column-gap: var(--github-calendar-gap);
}

.github-calendar__months {
  grid-template-rows: 16px;
  margin-bottom: 5px;
}

.github-calendar__months span {
  color: var(--font-color);
  font-size: 11px;
  line-height: 16px;
  opacity: 0.66;
  white-space: nowrap;
}

.github-calendar__grid {
  grid-template-rows: repeat(7, var(--github-calendar-cell-size));
  gap: var(--github-calendar-gap);
}

.github-calendar__cell {
  width: var(--github-calendar-cell-size);
  height: var(--github-calendar-cell-size);
  border-radius: 2px;
  background: rgba(144, 145, 153, 0.22);
}

.github-calendar__cell--level-1 { background: #9be9a8; }
.github-calendar__cell--level-2 { background: #40c463; }
.github-calendar__cell--level-3 { background: #30a14e; }
.github-calendar__cell--level-4 { background: #216e39; }

[data-theme='dark'] .github-calendar__cell { background: rgba(255, 255, 255, 0.16); }
[data-theme='dark'] .github-calendar__cell--level-1 { background: #0e4429; }
[data-theme='dark'] .github-calendar__cell--level-2 { background: #006d32; }
[data-theme='dark'] .github-calendar__cell--level-3 { background: #26a641; }
[data-theme='dark'] .github-calendar__cell--level-4 { background: #39d353; }

.github-calendar__legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 12px;
  color: var(--font-color);
  font-size: 0.78em;
  opacity: 0.72;
}

.github-calendar__legend i {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: rgba(144, 145, 153, 0.22);
}

.github-calendar__legend i:nth-of-type(2) { background: #9be9a8; }
.github-calendar__legend i:nth-of-type(3) { background: #40c463; }
.github-calendar__legend i:nth-of-type(4) { background: #30a14e; }
.github-calendar__legend i:nth-of-type(5) { background: #216e39; }

[data-theme='dark'] .github-calendar__legend i { background: rgba(255, 255, 255, 0.16); }
[data-theme='dark'] .github-calendar__legend i:nth-of-type(2) { background: #0e4429; }
[data-theme='dark'] .github-calendar__legend i:nth-of-type(3) { background: #006d32; }
[data-theme='dark'] .github-calendar__legend i:nth-of-type(4) { background: #26a641; }
[data-theme='dark'] .github-calendar__legend i:nth-of-type(5) { background: #39d353; }

.github-calendar__loading,
.github-calendar__error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 116px;
  color: var(--font-color);
  font-size: 0.92em;
  opacity: 0.76;
}

.github-calendar__retry {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--theme-color);
  cursor: pointer;
}

.github-calendar__retry:hover {
  background: var(--btn-bg);
}

@media screen and (max-width: 650px) {
  .github-calendar-card {
    padding: 18px 16px !important;
  }

  .github-calendar__header {
    flex-wrap: wrap;
    margin-bottom: 14px;
  }

  .github-calendar__summary {
    margin-left: 0;
  }
}