/* 
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        caption: "flex justify-center pt-1 relative items-center",
        caption_label: "text-sm font-medium",
        nav: "space-x-1 flex items-center",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-y-1",
        head_row: "flex mb-2 text-gray-500",
        head_cell:
          "text-muted-foreground rounded-primary w-[37px] font-normal text-[0.8rem]",
        row: "flex w-full mt-3",
        cell: cn(
          "relative p-0 text-center w-[37px] h-[24px] text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-primary-100",
          props.mode === "range"
            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md [&:has(>.day-range-end)]:!bg-transparent [&:has(>.day-range-start)]:!bg-transparent"
            : "[&:has([aria-selected])]:rounded-primary",
        ),
        day: cn(
          "w-[24px] h-[24px] p-0 font-normal text-sm aria-selected:opacity-100 rounded-[8px] ",
        ),
        day_range_start: "day-range-start bg-primary-500 text-white",
        day_range_end: "day-range-end bg-primary-500 text-white",
        day_selected: "",
        day_today: "bg-accent text-accent-foreground",
        day_outside: "text-muted-foreground opacity-50",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle: "",
        day_hidden: "invisible",
*/

.months {
  @apply relative flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0;
}
.month {
  @apply space-y-4;
}
.caption {
  @apply flex justify-center pt-1 items-center;
}
.caption_label {
  @apply text-sm font-medium;
}
.nav {
  @apply space-x-1 flex items-center;
}
.nav_button {
  @apply h-7 w-7 !p-0 opacity-50 hover:opacity-100;
}
.nav_button_previous {
  @apply absolute left-1 top-0;
}
.nav_button_next {
  @apply absolute right-1 top-0;
}
.table {
  @apply w-full border-collapse space-y-1;
}
.head_row {
  @apply flex mb-2 text-gray-500;
}
.head_cell {
  @apply rounded-primary w-[45px] md:w-[37px] font-normal text-[0.8rem];
}
.row {
  @apply flex w-full mt-1.5 md:mt-3;
}
.cell {
  @apply relative p-0 text-center w-[45px] md:w-[37px] h-[24px] text-sm focus-within:relative focus-within:z-20;
}
.cell_mode_range {
}
.cell_mode_default {
}
.day {
  @apply w-[24px] h-[24px] p-0 font-normal text-sm aria-selected:opacity-100 rounded-[8px];
}
.day_range_start {
  @apply bg-primary-500 text-white;
}
.day_range_end {
  @apply bg-primary-500 text-white;
}
.day_selected {
  @apply z-10;
}
.day_today {
}
.day_outside {
  @apply text-gray-300;
}
.day_disabled {
  @apply opacity-50;
}
.day_range_middle {
}
.day_hidden {
  @apply invisible;
}