:root {
    --fc-button-text-color: var(--text2);
    --fc-button-bg-color: var(--surface2);
    --fc-button-border-color: var(--surface4);
    --fc-button-hover-bg-color: var(--surface3);
    --fc-button-hover-border-color: var(--surface4);
    --fc-button-active-bg-color: var(--surface4);
    --fc-button-active-border-color: transparent;

    --fc-today-bg-color: hsl(var(--main-hue) 90% 90%);

    --fc-event-bg-color: var(--surface4);
    --fc-event-border-color: var(--surface4);

    --fc-event-selected-overlay-color: rgba(0, 0, 0, 0);

    --fc-neutral-bg-color: var(--surface4);
    --fc-list-event-hover-bg-color: var(--surface3) !important;

    --fc-border-color: var(--surface4);

    --highlight-hover: hsl(var(--main-hue) 90% 75%);
}

html.dark {
    --fc-today-bg-color: hsl(var(--main-hue) 90% 15%);
    --highlight-hover: hsl(var(--main-hue) 60% 20%);
}

:where(*) {
    color: var(--text1);
}

.fc {
    font-size: 1rem !important;
    height: 100%;
}

.fc table {
    border-collapse: separate !important;
}

.fc-scrollgrid-section {
    height: 0 !important;
}

.fc-timegrid-divider {
    display: none;
}

.fc-button-primary:active, .fc-button-primary.fc-button-active {
    --fc-button-text-color: var(--text4);
    text-shadow: 0.1rem 0.1rem var(--shadow-colour);
}

.fc-button-primary:focus {
    box-shadow: 0 0 0 0.1rem var(--surface4), var(--shadow) !important;
    outline: none;
}

.fc-icon {
    color: var(--fc-button-text-color);
}

.fc-timegrid-axis, .fc-col-header-cell {
    background-color: var(--surface2);
}

.fc-col-header-cell-cushion {
    color: var(--text1);
}

.fc-event:hover, .fc-event:focus {
    background-color: var(--surface3) !important;
}

.fc-event:focus {
    box-shadow: 0 0 0 0.1rem var(--surface4), var(--shadow) !important;
    outline: none;
}

.fc-v-event:hover,
.fc-h-event:hover,
.fc-v-event:focus,
.fc-h-event:focus {
    background-color: var(--highlight-hover) !important;
}

.fc-v-event:focus,
.fc-h-event:focus {
    box-shadow: 0 0 0 0.1rem var(--surface3), var(--shadow) !important;
    outline: none;
}

.fc-event-title {
    text-overflow: ellipsis;
}

.fc-list-day > th {
    z-index: 1;
}

@media(max-aspect-ratio: 1/1) {
    .fc-toolbar-title {
        display: none;
    }
}