pianello-api/resources/css/components/_full-calendar.css

.full-calendar {
    --fc-border-color: theme("colors.slate.200");
    .fc-toolbar {
        @media (max-width: calc(theme("screens.lg") - 1px)) {
            flex-direction: column;
        }
        .fc-toolbar-chunk {
            &:nth-child(1) {
                order: 3;
            }
            &:nth-child(2) {
                order: 1;
            }
            &:nth-child(3) {
                order: 2;
                @media (max-width: calc(theme("screens.lg") - 1px)) {
                    margin-top: theme("spacing.3");
                    margin-bottom: theme("spacing.3");
                }
                .fc-button-group {
                    @media (max-width: calc(theme("screens.sm") - 1px)) {
                        display: block;
                    }
                    button {
                        width: theme("spacing.20");
                        @media (max-width: calc(theme("screens.sm") - 1px)) {
                            width: 100%;
                            border-radius: theme("borderRadius.md");
                            margin-bottom: theme("spacing.2");
                        }
                    }
                }
            }
        }
        .fc-toolbar-title {
            font-size: theme("fontSize.lg");
            font-weight: theme("fontWeight.medium");
        }
    }
    .fc-toolbar-chunk .fc-button-primary {
        &:first-child {
            border-top-left-radius: theme("borderRadius.md");
            border-bottom-left-radius: theme("borderRadius.md");
        }
        &:last-child {
            border-top-right-radius: theme("borderRadius.md");
            border-bottom-right-radius: theme("borderRadius.md");
        }
    }
    .fc-theme-standard {
        .fc-scrollgrid,
        th,
        td,
        .fc-list {
            border-color: theme("colors.slate.200" / 60%);
        }
    }
    table {
        border-radius: theme("borderRadius.md");
        tr th .fc-scrollgrid-sync-inner {
            padding-top: theme("spacing.3");
            padding-bottom: theme("spacing.3");
        }
    }
    .fc-daygrid-event-harness {
        margin-left: theme("spacing.5");
        margin-right: theme("spacing.5");
    }
    .fc-h-event {
        background-color: theme("colors.primary");
        border-color: theme("colors.primary");
        border-radius: theme("borderRadius.md");
    }
    .fc-event-title-container {
        padding: theme("spacing.1") theme("spacing.2");
        font-size: theme("fontSize.xs");
    }
    .fc-daygrid-event {
        font-size: theme("fontSize.xs");
    }
    .fc-daygrid-event-dot {
        border-color: theme("colors.primary");
        margin-right: theme("spacing.2");
    }
    .fc-daygrid-dot-event .fc-event-title {
        font-weight: theme("fontWeight.medium");
    }
    .fc-col-header-cell-cushion {
        font-weight: theme("fontWeight.medium");
    }
    &.fc .fc-view-harness {
        @media (max-width: calc(theme("screens.sm") - 1px)) {
            min-height: 400px !important;
        }
    }
    &.fc .fc-daygrid-day-frame {
        @media (max-width: calc(theme("screens.sm") - 1px)) {
            min-height: 60px !important;
        }
    }
    .fc-daygrid-more-link {
        font-size: theme("fontSize.sm");
        @media (max-width: calc(theme("screens.md") - 1px)) {
            color: theme("colors.slate.500");
            font-size: 10px;
        }
        @media (max-width: calc(theme("screens.sm") - 1px)) {
            padding-left: 0;
            display: block;
            margin-top: calc(theme("spacing.3") * -1);
            leading: 10px;
        }
    }
    .fc-daygrid-day-bottom {
        padding-top: theme("spacing.1");
    }
    .fc-day-other {
        background-color: theme("colors.slate.100" / 50%);
    }
    .fc-button-primary {
        font-weight: theme("fontWeight.normal") !important;
        display: inline-block !important;
        border: 1px solid theme("colors.slate.200" / 60%) !important;
        color: theme("colors.slate.500") !important;
        background-color: transparent !important;
        text-transform: capitalize !important;
        padding: 0.4em 0.65em !important;
        transition-property: color, background-color, border-color,
            text-decoration-color, fill, stroke, opacity, box-shadow, transform,
            filter, backdrop-filter;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 200ms;
        box-shadow: theme("boxShadow.sm");
        align-items: center;
        justify-content: center;
        border-radius: theme("borderRadius.md");
        cursor: pointer;
        &:focus {
            box-shadow: theme("ringWidth.4");
            --tw-ring-color: theme("colors.primary");
            --tw-text-opacity: 0.2;
        }
        &:hover:not(:disabled) {
            --tw-background-opacity: 0.9;
            --tw-border-opacity: 0.9;
        }
        &:not(button) {
            text-align: center;
        }
        &:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }
        .fc-icon {
            font-size: 1.2em !important;
        }
        &:focus {
            box-shadow: none !important;
        }
    }
    .fc-button-primary:not(:disabled):active,
    .fc-button-primary:not(:disabled).fc-button-active {
        color: white !important;
        background-color: theme("colors.primary") !important;
        border-color: theme("colors.primary") !important;
    }
    .fc-list-day-cushion {
        background-color: theme("colors.slate.100" / 50%) !important;
        padding: 0.75rem 1.25rem !important;
    }
    .fc-list-event td {
        padding: theme("spacing.3") theme("spacing.5");
    }
    .fc-list-event-dot {
        border-color: theme("colors.primary") !important;
    }
    .fc-event-time {
        padding-left: theme("spacing.[0.5]");
        padding-right: theme("spacing.[0.5]");
        font-size: 0.75rem !important;
    }
    .fc-daygrid-more-link {
        padding-left: theme("spacing.2");
    }
}

.dark {
    .full-calendar {
        --fc-border-color: theme("colors.darkmode.400");
        .fc-button-primary {
            background-color: theme("colors.darkmode.400") !important;
            border-color: theme("colors.darkmode.400") !important;
        }
        .fc-list-day-cushion {
            background-color: theme("colors.darkmode.400") !important;
        }
        .fc-event:hover td {
            border-color: theme("colors.darkmode.400") !important;
            background-color: theme("colors.darkmode.400") !important;
        }
        .fc-theme-standard {
            .fc-scrollgrid,
            th,
            td,
            .fc-list {
                border-color: theme("colors.darkmode.400");
            }
        }
        .fc-day-other {
            background-color: theme("colors.darkmode.700");
        }
        .fc-button-primary:focus {
            --tw-ring-color: theme("colors.slate.700");
            --tw-ring-opacity: 0.5;
            transition-property: none;
        }
    }
}