.calendar-view {
    --fc-event-border-color: var(--calendar-coll-event-text-color, var(--main-text-color));
    --fc-event-bg-color: var(--calendar-coll-event-background-color, var(--accented-background-color));
    --fc-event-text-color: var(--calendar-coll-event-text-color, var(--main-text-color));
    --fc-event-selected-overlay-color: transparent;
    --fc-today-bg-color: var(--calendar-coll-today-background-color, var(--more-accented-background-color));

    overflow: hidden;
    position: relative;
    outline: 0;
    height: 100%;
    user-select: none;
    padding: 0;

    @media (max-width: 991px) {
        padding: 0;

        th {
            font-weight: normal;
            font-size: 0.9em;
        }
    }
}

.calendar-view a,
:root .calendar-view a.fc-daygrid-event:hover {
    color: var(--fc-event-text-color);
}

.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);
    padding: 0 var(--content-margin-inline);
}

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

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

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

.calendar-view .collection-properties {
    .center-container {
        justify-content: center;

        .title {
            min-width: 150px;
            font-size: 1.2em;
            text-align: center;
        }
    }

    @media (max-width: 991px) {
        >div {
            justify-content: flex-start;
        }

        .right-container {
            flex-grow: 0;
        }

        .center-container {
            .title {
                flex-grow: 1;
                min-width: 110px;
                font-size: 0.95em;
            }
        }
    }
}

/* #region Events */

/*
 * week, month, year views
 */

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

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

.calendar-container a.fc-event.archived::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;

    --c1: transparent;
    --c2: var(--callendar-coll-event-archived-sripe-color, #00000013);

    background: repeating-linear-gradient(45deg, var(--c1), var(--c1) 8px,
                                          var(--c2) 8px, var(--c2) 16px);
}

.calendar-view a.fc-timegrid-event,
.calendar-view a.fc-daygrid-event,
.calendar-view .fc-daygrid-dot-event .fc-event-title {
    font-weight: 500;
}

.calendar-view a.fc-timegrid-event,
.calendar-view a.fc-daygrid-event {
    --border-color: transparent;

    border: 2px solid;
    border-left-width: 4px;
    border-color: var(--border-color) var(--border-color) var(--border-color)
                  var(--fc-event-text-color) !important;
    background: var(--fc-event-bg-color) !important;

    padding-left: 8px;
}

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

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

.calendar-view a.fc-timegrid-event:focus-visible,
.calendar-view a.fc-daygrid-event:focus-visible {
    outline: none;
}

.calendar-view a.fc-timegrid-event.fc-event-selected,
.calendar-view a.fc-timegrid-event.fc-event:focus,
.calendar-view a.fc-daygrid-event.fc-event-selected,
.calendar-view a.fc-daygrid-event.fc-event:focus {
    --border-color: var(--custom-color, var(--input-focus-outline-color));
}

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

.calendar-view .fc-daygrid-event-dot {
    display: none;
}


.calendar-view .fc-event-time {
    opacity: .75;
}

/*
 * List view
 */

.fc-list-table tr.fc-event.archived {
    opacity: .5;
}

.fc-list-table .fc-list-event-dot {
    /* Apply note colors to the list item dots */
    --fc-event-border-color: var(--custom-color);
}

/* #endregion */
