.Month {
  @apply grid gap-[1px] overflow-auto rounded-lg border bg-gray-200 [grid-template-columns:repeat(7,_minmax(36px,_1fr))];
}

.Month-header,
.Month-body,
.Month-row {
  @apply contents;
}

.Month-dowLabel {
  @apply flex aspect-square items-center justify-center text-sm font-medium text-gray-900;
}

.Month-day {
  @apply relative flex aspect-square cursor-pointer items-center justify-center bg-white text-md text-gray-700 hover:bg-primary-25 hover:font-medium hover:text-primary-700;

  &.is-selected {
    @apply bg-primary-100 font-medium text-primary-700 hover:bg-primary-200 hover:text-primary-700;
  }
}

.Month-row:not(:first-child) .Month-dow {
  @apply hidden;
}

.Month-row:first-child .Month-day:has(.Month-dow) {
  @apply aspect-auto flex-col;

  > * {
    @apply w-full;
  }

  .Month-dom {
    @apply inline-flex aspect-square items-center justify-center;
  }

  .calendarEvents {
    @apply after:mx-auto after:mt-[14px];
  }
}

.Month-dow {
  @apply border-b border-gray-200 bg-gray-50 py-1 text-center text-sm text-gray-700;
}

.other-month {
  @apply text-gray-400;

  &.is-selected {
    @apply bg-gray-50 font-normal text-gray-400 hover:font-medium;
  }
}

.calendarEvents {
  @apply absolute top-[calc(50%_+_theme(lineHeight.5)_/_2)] inline-flex text-[0] leading-[0.25rem] after:inline-block after:size-1 after:rounded-full after:bg-primary-500;
}

.calendarDay-today.Month-day {
  @apply bg-primary-600 font-medium text-white hover:bg-primary-700;

  > .calendarEvents {
    @apply after:bg-white;
  }
}
