.react-datepicker {
  @apply border-gray-200 font-sofia-pro shadow-menu;
}

.react-datepicker__day--selected,
.react-datepicker__day--selected:hover,
.react-datepicker__time-list-item--selected {
  @apply !bg-primary-500;
}

.react-datepicker__time-list-item {
  @apply flex-center;
}

.react-datepicker__header.react-datepicker__header--has-time-select,
.react-datepicker__header.react-datepicker__header--custom {
  @apply border-gray-200 !bg-gray-50 !p-5;
}

.react-datepicker__current-month {
  @apply typo-para-small font-medium text-gray-800;
}

.react-datepicker__day-names {
  @apply mt-2 flex items-center gap-x-3;
}

.react-datepicker__day-name {
  @apply flex-center typo-para-small mx-[3px] h-[21px] w-8 uppercase text-gray-500;
}

.react-datepicker__month {
  @apply m-0 p-5;
}

.react-datepicker__week {
  @apply flex-center w-full gap-x-3;
}

.react-datepicker__day {
  @apply flex-center typo-para-small mx-[3px] size-8 rounded-full text-gray-600;
}

.react-datepicker__day.react-datepicker__day--outside-month {
  @apply text-gray-500;
}

.react-datepicker__day.react-datepicker__day--selected {
  @apply bg-primary-500 text-white;
}

.react-datepicker__time-container,
.react-datepicker__time-box {
  @apply !w-[100px] border-gray-200;
}

.react-datepicker__header.react-datepicker__header--time {
  @apply border-gray-200 bg-gray-50 p-3;
}

.react-datepicker-time__header {
  @apply typo-para-medium font-medium text-gray-700;
}

.react-datepicker__time-list-item {
  @apply typo-para-small text-gray-600;
}

.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {
  @apply !fill-gray-50 !stroke-gray-200 !text-gray-50;
}

.react-datepicker__day--disabled {
  @apply text-gray-500;
}
