.Calendar {
  --bg-color: theme(colors.primary.600);
  /* https://lea.verou.me/blog/2024/contrast-color/#using-rcs-to-automatically-compute-a-contrasting-text-color */
  --l-threshold: 0.7;
  --l: clamp(0, (var(--l-threshold, 0.623) / l - 1) * infinity, 1);
  --text-color: theme(colors.white.DEFAULT);

  .scheduledEvents-date {
    @apply border-b;
  }

  .ColorManagerButton {
    @apply btu-button btu-button-gray me-auto @calendar-lg/calendar:me-0;

    & > a {
      @apply text-inherit no-underline;
    }
  }

  .calendarEvent + .calendarEvent {
    @apply mt-0.5;
  }

  /* Calendar event container & label styling */
  .calendarEvent {
    @apply col-start-2 rounded bg-[--bg-color] text-[--text-color];

    &[data-cancelled='true'] {
      @apply line-through;
    }

    &[data-color] {
      --text-color: oklch(from var(--bg-color) var(--l) 0 h);
    }
  }

  .calendarEvent-time {
    @apply order-1 whitespace-nowrap font-normal;
  }

  .calendarEvent-label {
    @apply contents;

    & > a {
      @apply flex gap-1 truncate px-1 py-0.5 font-semibold text-[--text-color] no-underline;
    }
  }

  .day-of-week-1.Month-day > .calendarEvent {
    @apply ps-[15px] [clip-path:polygon(15px_0,100%_0,100%_100%,15px_100%,0_50%)];
  }

  .day-of-week-7.Month-day > .calendarEvent {
    @apply pe-[15px] [clip-path:polygon(0_0,calc(100%-15px)_0,100%_50%,calc(100%-15px)_100%,0_100%)];
  }

  /* View all events link
  Currently appears only in month view if there are more than 5 events in a day */
  .viewAllEvents {
    @apply contents;

    & > a {
      @apply col-start-2 mt-0.5 w-max max-w-full truncate rounded px-2 py-[3px] text-xs font-semibold text-gray-700 no-underline hover:bg-gray-100;
    }
  }

  /* Month view inside Calendar Widget */
  .Month-day {
    --margin: theme(spacing.1);
    --content-width: calc(100% - theme(spacing.2));

    @apply grid aspect-auto min-h-[189px] cursor-auto grid-cols-[var(--margin)_var(--content-width)_var(--margin)] content-start pb-[11px] text-xs hover:bg-white;

    &:hover .Month-dom {
      @apply bg-primary-25;
    }
  }

  .Month-dow {
    @apply col-span-full text-xs font-semibold text-gray-500;
  }

  .Month-dom {
    @apply col-start-2 mt-1 inline-flex size-6 items-center justify-center justify-self-center rounded-full;
  }

  .Month-row:first-child .Month-day:has(.Month-dow) {
    @apply h-[215px] justify-start;

    .Month-dom {
      @apply aspect-auto w-6;
    }
  }

  .Month-dom + .calendarEvent {
    @apply mt-1.5;
  }

  .calendarDay-today.Month-day {
    @apply bg-white hover:bg-white;

    .Month-dom {
      @apply bg-primary-600;
    }

    &:hover .Month-dom {
      @apply bg-primary-800;
    }
  }
}
