.heatmap-container {
  --heatmap-container-bg: var(--c-dark-10);
  --heatmap-cell-border: transparent;
  --heatmap-hover-outline: var(--c-dark-20);
  --heatmap-level-0-bg: var(--c-dark-10);
  --heatmap-level-1-bg: color-mix(in srgb, var(--c-primary) 20%, transparent);
  --heatmap-level-2-bg: color-mix(in srgb, var(--c-primary) 40%, transparent);
  --heatmap-level-3-bg: color-mix(in srgb, var(--c-primary) 60%, transparent);
  --heatmap-level-4-bg: var(--c-primary);

  display: flex;
  flex-direction: column;
  gap: var(--s);
  padding: var(--s2);
  background: var(--heatmap-container-bg);
  border-radius: var(--card-border-radius);
}

.heatmap-label {
  font-size: 12px;
  text-align: center;
  color: var(--text-color-muted);
  margin-bottom: -8px;
}

.heatmap-grid {
  display: flex;
  gap: var(--s);
  align-items: flex-start;
}

.scrollable-content {
  display: flex;
  flex-direction: column;
  gap: var(--s);
  overflow-x: auto;
  overflow-y: hidden;

  // Smooth scrolling
  scroll-behavior: smooth;

  // Better scrollbar styling
  &::-webkit-scrollbar {
    height: 8px;
  }

  &::-webkit-scrollbar-track {
    background: var(--c-dark-10);
    border-radius: var(--card-border-radius);
  }

  &::-webkit-scrollbar-thumb {
    background: var(--c-dark-20);
    border-radius: var(--card-border-radius);

    &:hover {
      background: var(--c-dark-30);
    }
  }
}

.heatmap-months {
  display: flex;
  gap: var(--s-quarter);
  font-size: 12px;
  line-height: 12px;
  height: 12px;
  color: var(--text-color-muted);
  flex-shrink: 0;

  .month-label {
    flex: 0 0 auto;
    width: calc(4 * 12px + 4 * 2px); // 4 weeks * (cell width + gap)
  }
}

.day-labels {
  display: flex;
  flex-direction: column;
  gap: var(--s-quarter);
  font-size: 10px;
  color: var(--text-color-muted);
  padding-right: var(--s-half);
  width: 40px;
  text-align: right;
  flex-shrink: 0;

  .month-spacer {
    height: 17px; // 12px (heatmap-months height) + 8px (gap in scrollable-content)
    flex-shrink: 0;
  }

  .day-label {
    height: 12px;
    line-height: 12px;
    flex-shrink: 0;
  }
}

.weeks {
  display: flex;
  gap: var(--s-quarter);
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.week {
  display: flex;
  flex-direction: column;
  gap: var(--s-quarter);
  flex-shrink: 0;
}

.day {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px var(--heatmap-cell-border);

  &.empty {
    background: transparent;
    box-shadow: none;
    cursor: default;
  }

  &.level-0 {
    background: var(--heatmap-level-0-bg);
  }

  &.level-1 {
    background: var(--heatmap-level-1-bg);
  }

  &.level-2 {
    background: var(--heatmap-level-2-bg);
  }

  &.level-3 {
    background: var(--heatmap-level-3-bg);
  }

  &.level-4 {
    background: var(--heatmap-level-4-bg);
  }

  &:not(.empty):hover {
    transform: scale(1.3);
    outline: 1px solid var(--heatmap-hover-outline);
    z-index: 1;
  }
}

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: var(--s-half);
  font-size: 11px;
  color: var(--text-color-muted);
  padding-right: var(--s-half);

  span {
    margin: 0 var(--s-half);
  }

  .legend-item {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px var(--heatmap-cell-border);

    &.level-0 {
      background: var(--heatmap-level-0-bg);
    }

    &.level-1 {
      background: var(--heatmap-level-1-bg);
    }

    &.level-2 {
      background: var(--heatmap-level-2-bg);
    }

    &.level-3 {
      background: var(--heatmap-level-3-bg);
    }

    &.level-4 {
      background: var(--heatmap-level-4-bg);
    }
  }
}

// Dark theme support
:host-context(.isDarkTheme) {
  .heatmap-container {
    --heatmap-container-bg: var(--c-light-05);
    --heatmap-cell-border: transparent;
    --heatmap-hover-outline: var(--c-light-60);
    --heatmap-level-0-bg: rgba(var(--ink-on-channel), 0.16);
    --heatmap-level-1-bg: color-mix(
      in srgb,
      var(--c-primary) 38%,
      rgba(var(--ink-on-channel), 0.16)
    );
    --heatmap-level-2-bg: color-mix(
      in srgb,
      var(--c-primary) 55%,
      rgba(var(--ink-on-channel), 0.16)
    );
    --heatmap-level-3-bg: color-mix(
      in srgb,
      var(--c-primary) 72%,
      rgba(var(--ink-on-channel), 0.16)
    );
  }

  .scrollable-content {
    &::-webkit-scrollbar-track {
      background: var(--heatmap-container-bg);
    }

    &::-webkit-scrollbar-thumb {
      background: var(--c-light-10);

      &:hover {
        background: var(--c-light-33);
      }
    }
  }
}
