html {
    --vaadin-fc-bg-color: var(--vaadin-background-color);

    --vaadin-fc-highlight-color: var(--lumo-primary-color, var(--aura-accent-color));
    --vaadin-fc-highlight-color-100: color-mix(in srgb, var(--vaadin-fc-highlight-color) 10%, transparent);
    --vaadin-fc-highlight-color-200: color-mix(in srgb, var(--vaadin-fc-highlight-color) 20%, transparent);
    --vaadin-fc-highlight-color-500: color-mix(in srgb, var(--vaadin-fc-highlight-color) 50%, transparent);
    --vaadin-fc-highlight-color-800: color-mix(in srgb, var(--vaadin-fc-highlight-color) 80%, transparent);

    --vaadin-fc-highlight-text-color: var(--lumo-primary-text-color, var(--aura-accent-text-color));

    --vaadin-fc-contrast-color: var(--lumo-contrast, var(--aura-accent-contrast-color, #333));
    --vaadin-fc-contrast-color-50: color-mix(in srgb, var(--vaadin-fc-contrast-color) 5%, transparent);
    --vaadin-fc-contrast-color-100: color-mix(in srgb, var(--vaadin-fc-contrast-color) 10%, transparent);
    --vaadin-fc-contrast-color-200: color-mix(in srgb, var(--vaadin-fc-contrast-color) 20%, transparent);
    --vaadin-fc-contrast-color-500: color-mix(in srgb, var(--vaadin-fc-contrast-color) 50%, transparent);
    --vaadin-fc-contrast-color-800: color-mix(in srgb, var(--vaadin-fc-contrast-color) 80%, transparent);

    --vaadin-fc-neutral-color: color-mix(in srgb, var(--vaadin-text-color-disabled) 15%, transparent);
    --vaadin-fc-hover-color: var(--vaadin-fc-highlight-color-100);

    --vaadin-fc-font-size-s: var(--lumo-font-size-s, var(--aura-font-size-s));
    --vaadin-fc-line-height-xs: var(--lumo-line-height-xs, var(--aura-line-height-xs));

}

.vaadin-full-calendar.fc[theme~="vaadin"] {

    background: var(--vaadin-fc-bg-color);

    --fc-small-font-size: var(--vaadin-fc-font-size-s);
    --fc-page-bg-color: var(--vaadin-background-color); /* for FC popups */
    --fc-neutral-bg-color: var(--vaadin-fc-neutral-color);
    --fc-neutral-text-color: var(--vaadin-text-color-secondary);
    --fc-border-color: var(--vaadin-border-color-secondary); /* outer border is overriden separately*/
    --fc-outer-border-color: var(--vaadin-border-color);

    --fc-event-bg-color: var(--vaadin-fc-highlight-color);
    --fc-event-border-color: var(--vaadin-fc-highlight-color-500);
    /*--fc-event-text-color: oklch(from var(--fc-event-bg-color) clamp(0,(0.62 - l) * 1000,1) 0 0/clamp(0.8,(0.62 - l) * 1000,1));*/

    --fc-event-selected-overlay-color: var(--vaadin-fc-highlight-color-100);
    --fc-list-event-hover-bg-color: var(--vaadin-fc-hover-color);

    --fc-event-resizer-thickness: 8px;
    --fc-event-resizer-dot-total-width: 8px;
    --fc-event-resizer-dot-border-width: 1px;

    --fc-non-business-color: var(--vaadin-fc-neutral-color);
    --fc-bg-event-color: var(--vaadin-fc-highlight-color-800);
    --fc-bg-event-opacity: 0.3;
    --fc-highlight-color: var(--vaadin-fc-highlight-color-200);

    --fc-today-bg-color: transparent; /* handled differently */
    --fc-now-indicator-color: var(--vaadin-fc-contrast-color-500);

    /* general modifications of the calendar entry / event item */
    .fc-event {
        border-radius: var(--vaadin-radius-s);
        padding-left: var(--vaadin-padding-xs);
        padding-right: var(--vaadin-padding-xs);
    }

    /* changing hovering colors for any other type of events, that have no own background color or custom property*/
    .fc-daygrid-dot-event:hover {
        background-color: var(--vaadin-fc-hover-color);
    }

    /* general font sizes*/
    .fc-col-header-cell,
    .fc-daygrid-day-number,
    .fc-daygrid-week-number,
    .fc-timeline-header-row,
    .fc-timegrid-axis,
    .fc-list th .fc-list-day-cushion {
        font-size: var(--vaadin-fc-font-size-s);
    }

    /* the selection highlight*/
    .fc-highlight {
        /* imitates the Grid selection highlighting */
        background: linear-gradient(var(--fc-highlight-color), var(--fc-highlight-color)) repeat;
        box-shadow: 0 1px 0 0 var(--fc-highlight-color);
    }

    /* This part makes the "today" link being shown as a badge */
    .fc-day-today a:is(
        .fc-col-header-cell-cushion,
        .fc-daygrid-day-number,
        .fc-list-day-text,
        .fc-timeline-slot-cushion,
        .fc-list-day-side-text
    ):not(:empty) {
        color: var(--vaadin-fc-highlight-text-color);
        background-color: var(--vaadin-fc-highlight-color-100);
        border-radius: var(--vaadin-radius-s);
        font-weight: 800;
        padding-left: var(--vaadin-padding-s);
        padding-right: var(--vaadin-padding-s);
    }

    /* FC adds empty "day numbers", even if they are not needed. This messes up our styling so we hide them */
    :is(.fc-dayGridWeek-view, .fc-dayGridDay-view) a:is(.fc-daygrid-day-number) {
        visibility: hidden !important;/*we want to preserve the space for the CW part (?) but not show anything*/
        /*display: none !important; !*alternative to the visibility hidden*!*/
    }

    /* the "plus n more events". The fc custom properties seem not to work, so we set it here manually*/
    .fc-more-link:hover {
        background-color: var(--vaadin-fc-hover-color);
    }

    /* setting an outer border like the grid does*/
    .fc-scrollgrid {
        border-color: var(--fc-outer-border-color);
    }
}