.calendar-view {
    overflow: hidden;
    position: relative;
    outline: 0;
    height: 100%;
    user-select: none;
    padding: 10px;
}

.calendar-view a {
    color: unset;
}

.search-result-widget-content .calendar-view {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 0;
}

.calendar-container {
    height: 100%;
    --fc-page-bg-color: var(--main-background-color);
    --fc-border-color: var(--main-border-color);
    --fc-neutral-bg-color: var(--launcher-pane-background-color);
    --fc-list-event-hover-bg-color: var(--left-pane-item-hover-background);
}

.calendar-container .fc-list-sticky .fc-list-day > * {
    z-index: 50;
}

.calendar-container a.fc-event {
    text-decoration: none;
}

.calendar-container a.fc-event.archived {
    opacity: 0.5;
}

.calendar-container .fc-button {
    padding: 0.2em 0.5em;
}

.calendar-container .promoted-attribute {
    font-size: 0.85em;
    opacity: 0.85;
    overflow: hidden;
}

/* #region Header */
.calendar-view .calendar-header {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.calendar-view .calendar-header .btn {
    min-width: unset !important;
}

.calendar-view .calendar-header > .title {
    flex-grow: 1;
    font-size: 1.3rem;
    font-weight: normal;
}

body.desktop:not(.zen) .calendar-view .calendar-header {
    padding-block-start: 4px;
    padding-inline-end: 5em;
}

.search-result-widget-content .calendar-view .calendar-header {
    padding-inline-end: unset !important;
}
/* #endregion */

.calendar-view {
    --fc-event-text-color: var(--calendar-coll-event-text-color);
    --fc-event-bg-color: var(--calendar-coll-event-background-color);
}

.calendar-view a.fc-timegrid-event,
.calendar-view a.fc-daygrid-event {
    border: unset;
    border-left: 4px solid;
    padding-left: 8px;
    font-weight: 500;
}

.calendar-view a.fc-timegrid-event:hover,
.calendar-view a.fc-daygrid-event:hover {
    text-decoration: none;
    border-color: var(--fc-event-text-color);
    filter: var(--calendar-cell-event-hover-filter);
}

.fc-timegrid-event.with-hue, .fc-daygrid-event:not(.fc-daygrid-dot-event).with-hue {
    --fc-event-text-color: var(--custom-color);

    background: hsl(var(--custom-color-hue),
                    var(--calendar-coll-event-background-saturation),
                    var(--calendar-coll-event-background-lightness)) !important;
}