:root {
    --flag-color: white;
    --flag-background-color-available: var(--button-background-green-hover);
    --flag-background-color-unavailable: var(--button-background-red-hover);
    --font-color: white;
}
:root.high-contrast {
    --flag-color: black;
    --flag-background-color-available: #9cc87e;
    --flag-background-color-unavailable: var(--button-background-red-hover);
    --font-color: black;
}

.sm-month-calendar-item {
    display: grid;    
    column-gap: 1px;
    overflow: hidden;
}
.sm-month-calendar-item.grid-template-columns-1 {
    grid-template-columns: 1fr min-content;
}
.sm-month-calendar-item.grid-template-columns-2 {
    grid-template-columns: 1fr min-content min-content;
}
.sm-month-calendar-item .calendar-item-content {
    padding: 0.25em;
}
.sm-month-calendar-item .calendar-item-available-flag {
    width: 0.5em;
}
.sm-month-calendar-item.available .calendar-item-available-flag {
    background-color: var(--button-background-green-hover);
}
.sm-month-calendar-item.unavailable .calendar-item-available-flag {
    background-color: var(--button-background-red-hover);
}
.sm-month-calendar-item .flag-container {
    display: flex;
}
.sm-month-calendar-item .available {
    padding: 0.25em;
    background-color: var(--flag-background-color-available);
    color: var(--flag-color);
    text-align: center;
    min-width: 1.25em;
}
.sm-month-calendar-item .unavailable {
    padding: 0.25em;
    background-color: var(--flag-background-color-unavailable);
    color: var(--flag-color);
    text-align: center;
    min-width: 1.25em;
}
.sm-month-calendar-item .unavailable div,
.sm-month-calendar-item .available div {
    display: inline-flex;
    align-items: center;
    height: 100%;
}