:root {
    --calendarDayBR: 2rem;
}

.calendar {
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--foregroundColor);
    color: var(--textColor);
    font-size: 1rem;
    flex-shrink: 0;
}

.calendar > .header {
    padding: 0.5em;
    justify-content: space-between;
    color: var(--textColor);
    border-bottom: 1px solid var(--darkBorderColor);
    background-color: var(--foregroundColor);
}

.calendar > .header > i {
    color: var(--textColor);
    cursor: pointer;
    font-size: 1.5em;
}

.calendar > .header > .time {
    font-size: 1em;
}

.calendar > .header > .proportion {
    font-size: 1em;
}

.calendar > .grid {
    display: grid;
    grid-template-columns: repeat(7, 2em);
    grid-template-rows: repeat(6, 2em);
    padding: 0.2em 0.5em;
    font-size: 1em;
}

.calendar > .grid > .cell {
    position: relative;
    justify-content: center;
    align-items: center;
    color: var(--textColor);
    border-radius: var(--calendarDayBR);
    margin: 0.1em 0;
}

.calendar > .grid > .cell:not(.empty) {
    cursor: pointer;
}

.calendar > .grid > .cell > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.calendar > .grid > .cell.completedAfter {
    background-color: var(--backgroundColor);
    border-radius: 0.3em !important;
}

/* Connects the cells if the previous one was completed but not if this is the first in a row */
.calendar > .grid > .cell:matches(.cell.cont:not(.saturday) + *) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.calendar > .grid > .cell:matches(.cell.cont.saturday + *) {
    border-top-left-radius: 0.3em;
    border-bottom-left-radius: 0.3em;
}

/* Connects the cells if the next one is completed but not if this is the last in a row */
.calendar > .grid > .cell:has(+ .cell.cont:not(.sunday)) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.calendar > .grid > .cell:has(+ .cell.cont.sunday) {
    border-top-right-radius: 0.3em;
    border-bottom-right-radius: 0.3em;
}

.calendar > .grid > .cell .today {
    height: 120%;
    aspect-ratio: 1/1;
    border-radius: 10rem !important;
    border: 2px solid var(--correctColor);
}

.calendar.streakSaver > .grid > .cell.noStreak {
    background-color: rgba(var(--bluecolor) / 0.8);
    border-radius: var(--calendarDayBR) !important;
    margin: 0;
}

.calendar > .footer {
    padding: 0.3em;
    background-color: var(--foregroundColor);
    justify-content: flex-end;
    font-size: 0.8em;
}

.calendar > .footer > div {
    gap: 0.3em;
    align-items: center;
}

.calendar > .footer i.fa-circle-info {
    color: var(--textColor);
    cursor: pointer;
    font-size: 1.1em;
    display: flex;
    align-items: center;
}

.calendar > .footer i.fa-plus {
    color: var(--textColor);
    cursor: pointer;
    font-size: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease;
}

.calendar.streakSaver > .footer i {
    transform: rotate(45deg);
}