.b-event-body {
    max-width : calc(100% - 20px);
}

.is-sunday {
    background-color : rgba(255, 200, 200, 0.4) !important;
}

.b-all-day {
    /* Don't want to see the image in the all day row */
    .b-event-image {
        display : none;
    }
}

.b-event-image {
    max-width : 100%;
    padding   : 0.2em 0;
}

.b-day-view-day-detail .b-cal-event-desc {
    display         : flex;
    height          : 100%;
    flex-direction  : column;
    justify-content : space-between;
}

.b-day-view-day-container .b-calendar-cell {
    .b-cal-event-wrap {
        border-radius: 5px;
    }
    .b-cal-event {
        border        : 1px solid var(--cal-event-color);
        border-radius : 5px;
        margin-bottom : 0.5px;

        .b-cal-event-body {
            margin: 0;
        }
    }
}

[data-group="multiDays"] {
    &.b-checked {
        i::before {
            content : "\f00c"; /* fa-check */
        }
    }
    &:not(.b-checked) {
        i::before {
            content : " "; /* empty */
        }
    }
}

.b-week-number-cell {
    justify-content : center;
    align-items     : center;

    .b-week-name {
        writing-mode : tb;
        display      : flex;
        align-items  : center;
        transform    : rotateZ(180deg);
    }
}

.b-calendar-row {
    .b-highlight-day {
        font-size : 120%;
    }
}

.hackathon-dayoff {
    .b-cal-event .b-cal-event-icon {
        &:before {
            content               : "\f118"; /* fa-smile */
            font-size             : 1em;
            color                 : yellow;
            z-index               : 1;
            text-shadow           : 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
            margin-inline-start   : .5em;
        }
    }
}

.b-cal-agenda-event-row {
    .b-cal-event-wrap.b-with-image {
        .b-cal-event {
            align-items : flex-start;
            .b-cal-event-icon {
                display : block;
            }
        }
        .b-cal-event-desc {
            align-items : flex-start;
        }

        /* A little trick to get the image to align to the left of the body */
        .b-cal-event-body {
            .b-event-name {
                margin : 0 0 0.3em 0;
            }
        }
    }
}

/* Single day event bars in day cells (MonthView and DayView's all day row) must */
/* look similar to DayView events with an initial strip of the event colour, then */
/* a lighter version of that colour. */
:is(.b-day-cell-renderer,.b-overflow-popup) .b-cal-event-bar-container .b-cal-event-wrap:not(.b-continues-past,.b-continues-future) {
    /* Show space around the bar */
    padding-inline : 4px 5px;

    /* Make the event body a lighter version of the event color */
    .b-cal-event {
        /* Then the text has to be dark */
        --b-calendar-all-day-event-color : var(--b-neutral-20);

        border-left      : 0.4em solid var(--b-primary);
        background-color : color-mix(in srgb, var(--b-primary), var(--b-mix) 75%);
    }
}

.fa-birthday-cake {
    background      : var(--b-primary);
    padding         : 0.5em;
    border-radius   : 50%;
    color           : #fff;
    width           : 100%;
    height          : 100%;
    display         : flex;
    align-items     : center;
    justify-content : center;
}