// Using host and root because calendar is loaded outside shadow dom for testing automation
:host, :root {

    // overrides
    --fc-border-color: var(--mc-dividers);
    --fc-today-bg-color: var(--mc-page-bg);

    // events
    --fc-event-border-color: var(--mc-theme-color-main);
    --fc-event-bg-color: var(--mc-theme-color-main);
    --fc-event-text-color: white;

    --fc-event-cancelled-bg-color: var(--mc-page-bg);
    --fc-event-cancelled-text-color: var(--mc-medium-orange);
    --fc-event-cancelled-border-color: var(--mc-medium-orange);
    
    // buttons
    --fc-button-text-color: var(--mc-text);
    --fc-button-bg-color: var(--mc-page-bg);
    --fc-button-border-color: var(--mc-theme-color-main);
    --fc-button-active-text-color: white;    // new
    --fc-button-active-bg-color: var(--mc-theme-color-main);
    --fc-button-active-border-color: var(--mc-theme-color-main);
    --fc-button-hover-text-color: white;    // new
    --fc-button-hover-bg-color: var(--mc-theme-color-main);
    --fc-button-hover-border-color: var(--mc-theme-color-main);

    // Misc (all new)
    --fc-month-heading-bg-color: var(--mc-light-gray);       // bg color for day headers (Sunday, Monday...)
    --fc-month-other-days-bg-color: #fbfdfe;    // bg color for days that belong to a different month
    --fc-toolbar-heading-text-color: var(--mc-theme-color-main);
    --fc-day-number-color: black;

    // today (all new)
    --fc-today-date-bg-color: var(--mc-theme-color-main);
    --fc-today-date-text-color: white;
    --fc-today-bg-color: var(--mc-light-gray);


}
.hidden { position: absolute; left: -9999; top: 0; width: 100%; height: 0; overflow: hidden; }
.fc-theme-standard {

    margin-top: .5em;

    .fc-toolbar-title { color: var(--fc-toolbar-heading-text-color); }

    th {
        background: var(--fc-month-heading-bg-color);
        padding: .5em 0;
        a.fc-col-header-cell-cushion {
            color: var(--mc-text);
            &:hover { color: var(--mc-text); }
        }
    }

    tbody {
        tr {
            // force rows to only take up the space they need
            height: calc(100% / 6);
        }
    }

    a.fc-daygrid-block-event {
        &:hover {
            opacity: .6;
        }
    }

    .fc-daygrid-day-number { color: var(--fc-day-number-color); }

    // shade days that belong to other months
    .fc-day-other {
        background: var(--fc-month-other-days-bg-color);
        .fc-daygrid-day-top { opacity: 0.54; }
    }

    // highlight today
    .fc-day-today {
        background: var(--fc-today-bg-color);
        a.fc-daygrid-day-number {
            padding: 3px 7px;
            margin: 2px;
            background: var(--fc-today-date-bg-color);
            color: var(--fc-today-date-text-color);
            border-radius: 2px;
        }
    }

    .fc-event-cancelled,
    .fc-event-postponed {
        // force correct colors
        --fc-event-text-color: var(--fc-event-cancelled-text-color);
        --fc-event-bg-color: var(--fc-event-cancelled-bg-color);
        --fc-event-border-color: var(--fc-event-cancelled-border-color);

        color: var(--fc-event-cancelled-text-color);


        .fc-daygrid-cancelled-icon { margin: 0 4px; }
        .fc-event-title { font-weight: normal; display: inline;}

        // correct overflow issues on month view for dot events
        &.fc-daygrid-dot-event {
            .fc-event-main-frame { overflow: hidden; }
        }
        // correct alignment of events on week/day views
        .fc-event-main-frame { flex-direction: row; }
    }

    // buttons
    .fc-button-primary:hover {
        color: var(--fc-button-hover-text-color) !important;
    }
    .fc-button-primary:not(:disabled):active,
    .fc-button-primary:not(:disabled).fc-button-active {
        color: var(--fc-button-active-text-color) !important;
    }

    // fix firefox background hiding border
    &.fc-liquid-hack td,
    &.fc-liquid-hack th {
        background-clip: padding-box !important;
    }
}