#calendar-container {
    --color-background-heading: transparent;
    --color-background-day: transparent;
    --color-background-weeknum: transparent;
    --color-background-weekend: transparent;

    --color-dot: var(--text-muted);
    --color-arrow: var(--text-muted);
    --color-button: var(--text-muted);

    --color-text-title: var(--text-normal);
    --color-text-heading: var(--text-muted);
    --color-text-day: var(--text-normal);
    --color-text-today: var(--interactive-accent);
    --color-text-weeknum: var(--text-muted);

    --calendar-font-size: 20px;

    font-size: var(--calendar-font-size);
}

.view-content:has(#calendar-container) {
    padding: 0; }

#calendar-container {
    padding: 0 8px 8px 8px; }

#calendar-container .year {
    color: var(--text-muted);
    font-family: var(--font-interface);
    font-size: var(--calendar-font-size); }

#calendar-container .month {
    font-family: var(--font-interface);
    color: var(--text-accent);
    font-size: calc(var(--calendar-font-size) * 1.3); }

#calendar-container .week-num,
#calendar-container .week-num:hover {
    color: var(--text-accent); }

#calendar-container td,
#calendar-container .day {
    border-radius: 0 !important; }

#calendar-container .day {
    padding-top: 0;
    padding-bottom: 0; }

#calendar-container .day,
#calendar-container .week-num {
    font-size: calc(var(--calendar-font-size) * 0.75); }

#calendar-container th {
    font-size: calc(var(--calendar-font-size) * 0.57) !important;
    background: var(--bg1, var(--background-secondary-alt)); }

#calendar-container .day.adjacent-month {
    color: var(--text-accent); }

#calendar-container .weekend {
    background: var(--background-secondary-alt); }

.colorful-active #calendar-container .active,
.colorful-active #calendar-container .active.today,
.colorful-active #calendar-container .active:hover,
.colorful-active #calendar-container .day:active {
    background-color: var(--background-modifier-hover);
    color: var(--title-color); }