/* ------------------------------------------------------------------------------------------------------------------ */
/* Heatmap                                                                                                            */
/* ------------------------------------------------------------------------------------------------------------------ */
.heatmap-container {
    max-width: 100%;
}
.heatmap {
    display: grid;
    grid-template-columns: repeat(52, 1fr);
    grid-template-rows: repeat(7, 1fr);
    gap: 0.25rem;
    aspect-ratio: 52 / 7;
}
.heatmap .day {
    width: 100%;
    padding-bottom: 100%;
    border-radius: 0.2rem;
}
.day.today {
    border: 1px solid rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}
.unlogged-day { background-color: white; }
.intensity-0 { background-color: lightgreen; }
.intensity-1 { background-color: var(--intensity-1); }
.intensity-2 { background-color: var(--intensity-2); }
.intensity-3 { background-color: var(--intensity-3); }
.intensity-4 { background-color: var(--intensity-4); }
.intensity-5 { background-color: var(--intensity-5); }
.intensity-6 { background-color: var(--intensity-6); }