@layer fsapp.calendar-runtime;

@layer fsapp.calendar-runtime {

  .project-timeline-calendar {
    display: grid;
    gap: var(--fs-space-2);
  }

  .fc {
    --fc-neutral-bg-color: color-mix(in srgb, var(--fs-button-border) 5%, transparent);
    --fc-neutral-text-color: var(--md-sys-color-on-surface);
    --fc-border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 42%, transparent);
    --fc-small-font-size: var(--md-sys-typescale-body-small-size);
    --fc-page-bg-color: color-mix(in srgb, var(--md-sys-color-surface-container-high) 80%, transparent);
    --fc-button-text-color: var(--md-sys-color-on-surface);
    --fc-now-indicator-color: var(--fs-error);
    --fc-event-border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 36%, transparent);
    background: color-mix(in srgb, var(--md-sys-color-background) 96%, transparent);
    border: 0.0625rem solid var(--fc-border-color);
    padding: var(--fs-space-2);
    font-size: var(--md-sys-typescale-body-medium-size);
  }

  .project-timeline-calendar .fc .fc-button-primary,
  .fsapp-calendar-host .fc .fc-button-primary {
    color: var(--fc-button-text-color);
  }

  .project-timeline-calendar .fc .fc-multimonth-month,
  .fsapp-calendar-host .fc .fc-multimonth-month {
    background: color-mix(in srgb, var(--fc-page-bg-color) 96%, transparent);
    border: 0.0625rem solid var(--fc-border-color);
  }

  .fc .fc-multimonth {
    border: 0.0625rem solid var(--fc-border-color);
  }

  .fc .fc-scrollgrid,
  .fc.fc-theme-standard td,
  .fc.fc-theme-standard th,
  .fc .fc-daygrid-day,
  .fc .fc-list,
  .fc .fc-list-table td,
  .fc .fc-list-day-cushion {
    border-color: var(--fc-border-color);
  }

  .fc .fc-toolbar {
    flex-wrap: wrap;
    gap: var(--fs-space-2);
  }

  .fc .fc-button .fc-icon {
    font-size: inherit !important;
  }

}