:root {
    --calendar-header-color: var(--main-low-visibility-color);
    --calendar-day-color: var(--main-color);
    --calendar-day-color-hover: var(--button-icon-color-hover);
    --calendar-day-selected-border: none;
    --calendar-day-selected-background-color: var(--icon-grey-color);
}
:root.high-contrast {
    --calendar-header-color: var(--main-color-hover);
    --calendar-day-color: var(--main-color);
    --calendar-day-color-hover: var(--button-icon-color-hover);
    --calendar-day-selected-border: 1px solid var(--main-color);
    --calendar-day-selected-background-color: var(--main-background-color);
}
.sm-calendar {
    width: min-content;
    display: flex;
    flex-flow: column;
    row-gap: 1em;
}
.sm-calendar .month-selector {
    display: flex;
    align-items: center;
    column-gap: 1em;
    width: 100%;
    justify-content: space-between;
}
.sm-calendar .month-selector .label {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 1.2em;
    color: var(--main-accent-color);
    white-space: nowrap;
    text-align: center;
}
.sm-calendar .calendar-container {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 1.2em;
    display: grid;
    grid-template-columns: min-content min-content min-content min-content min-content min-content min-content;
    /* grid-row-gap: 0.5em; */
    /* grid-column-gap: 0.5em; */
    width: min-content;
    align-items: center;
    text-align: center;
}
.sm-calendar .calendar-container div.day-label {
    color: var(--calendar-header-color);
    padding: 0.5em;
}
.sm-calendar .calendar-container div .day {
    padding: 0.5em;
    color: var(--calendar-day-color);
    cursor: pointer;
}
.sm-calendar .calendar-container div .day.current {
    color: var(--main-record-color-purple);
}
.sm-calendar .calendar-container div .day.selected {
    background-color: var(--calendar-day-selected-background-color);
    border: var(--calendar-day-selected-border);
    border-radius: 0.25em;

}
.sm-calendar .calendar-container div .day:hover {
    color: var(--calendar-day-color-hover);
}
.sm-calendar .buttons-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 0.5em;
    justify-content: space-evenly;
}
.sm-calendar .buttons-container .sm-button {
    min-width: var(--button-min-width);
}