.calendar {
    --clr-calendar: #FCFBF9;
    --clr-booked: #F1E4D7;
    --clr-booked-line: #E1CFBB;
    --clr-error: #EF2B2E;
    --clr-border: #E5E5E5;

    background-color: var(--clr-calendar);
    border: .2em var(--clr-border) solid;
    border-radius: .5em;

    width: auto;

    font-family: var(--ff-serif);
}

.calendar .date-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--ff-title);
    font-weight: bold;
    padding: .5em;
}

.calendar .date-selector .date {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
}

.calendar .date-selector .button {
    height: 2em;
    width: 2em;
    border-radius: .5em;
    transition: background-color 150ms ease;
    background-color: transparent;
    cursor: pointer;
}

.calendar .date-selector .button .image {
    height: 100%;
    width: 100%;
    background-image: url(../img/selector-right.png);
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: .5em;
    filter: brightness(0%);
    transition: filter 150ms ease;
}

.calendar .date-selector .button.left .image {
    background-image: url(../img/selector-left.png);
}

.calendar .date-selector .button:hover {
    background-color: var(--clr-highlight);    
}

.calendar .date-selector .button:hover .image {
    filter: brightness(100%);
}

.calendar .titles {
    display: flex;
    border-top: .2em var(--clr-border) solid;
    border-bottom: .2em var(--clr-border) solid;
}

.calendar .titles > * {
    flex: 1 1 14%;
    min-width: 13%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-block: .5em;
    white-space: nowrap;
    overflow: hidden;
}

.calendar .days {
    --day-gap: .1em;

    display: flex;
    flex-wrap: wrap;
    gap: var(--day-gap);
    background-color: var(--clr-border);
    overflow: hidden;
}

.calendar .days > * {
    flex: 1 1 calc(14% - .1em);
    min-width: 13%;    
}

.calendar .days .day {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    height: 4em;
    background-color: white;
}

.calendar .days .day .highlight,
.calendar .days .day .highlight-turnover {
    display: none;
    position: absolute;
    width: calc(100% + var(--day-gap));
    height: 90%;
    background-color: var(--clr-booked);
}

.calendar .days .day .highlight-turnover {
    width: 70%;
    right: 0;
    border-top-left-radius: .5em;
    border-bottom-left-radius: .5em;
    display: none;
}

.calendar .days .day .line {
    position: absolute;
    width: .1em;
    height: 90%;
    background-color: var(--clr-booked-line);
    left: calc(0% - .1em);
    display: none;
}

.calendar .days .day p {
    position: absolute;
}

.calendar .days .day.checkin .highlight {
    width: 70%;
    right: calc(var(--day-gap) * -1);
    border-top-left-radius: .5em;
    border-bottom-left-radius: .5em;
}

.calendar .days .day.checkout .highlight {
    width: 20%;
    left: calc(var(--day-gap) * -1);
    border-top-right-radius: .5em;
    border-bottom-right-radius: .5em;
}

.calendar .days .day.turnover .highlight {
    width: 20%;
    left: calc(var(--day-gap) * -1);
    border-top-right-radius: .5em;
    border-bottom-right-radius: .5em;
}

.calendar .days .day.turnover .highlight-turnover {
    display: block;
}

.calendar .days .day.checkin .highlight,
.calendar .days .day.checkout .highlight,
.calendar .days .day.turnover .highlight,
.calendar .days .day.booked .highlight,
.calendar .days .day.checkout .line,
.calendar .days .day.turnover .line,
.calendar .days .day.booked .line {
    display: block;
}

.calendar .days .day.passed {
    color: #7F7F7F;
    background-color: #F2F2F2; 
}

.calendar .days .day.none p {
    display: none;
}

.calendar .days .day.none .highlight,
.calendar .days .day.none .highlight-turnover,
.calendar .days .day.none .line {
    filter: saturate(0%);
}

.calendar .days .day.passed .highlight,
.calendar .days .day.passed .highlight-turnover,
.calendar .days .day.passed .line {
    filter: saturate(0%);
}

.calendar .footer {
    border-top: .2em var(--clr-border) solid;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1em;
    gap: .5em;
}

.calendar .footer .legend {
    display: flex;
    justify-content: center;
    align-items: center;
}

.calendar .footer .legend .square {
    width: 2em;
    height: 2em;
    border-radius: .5em;
    background-color: var(--clr-booked);
    margin-right: 1em;
}