.react-datepicker {
  @apply bg-tertiary rounded-none border-none;
  font-family: LineSeedEN;
}

.react-datepicker__header {
  @apply border-none bg-transparent p-2;
}

.react-datepicker__month {
  @apply p-2;
}
.react-datepicker__current-month {
  @apply bg-fill-quaternary font-16-regular text-primary rounded-sm px-4 py-3 !important;
}

.react-datepicker__navigation--previous,
.react-datepicker__navigation--next {
  @apply top-[22px];
}

.react-datepicker__navigation--previous {
  @apply left-3;
}

.react-datepicker__navigation--next {
  @apply right-3;
}

.react-datepicker__day-names,
.react-datepicker__week {
  @apply font-12-regular mb-0 flex items-center gap-4 border-0 px-4 py-2;
}

.react-datepicker__day-name {
  @apply text-secondary;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  line-height: 32px !important;
  @apply font-12-regular m-0 h-8 w-8 rounded-full;
}

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

.react-datepicker__day--in-range {
  @apply bg-fill-tertiary text-primary;
}

.react-datepicker__day--in-selecting-range:not(
    .react-datepicker__day--in-range
  ) {
  @apply bg-fill-tertiary text-primary;
}

.react-datepicker__day--range-start,
.react-datepicker__day--range-end,
.react-datepicker__day--selecting-range-start,
.react-datepicker__day--selecting-range-end {
  @apply bg-fill-primary text-inverse !important;
}

.react-datepicker__day {
  @apply text-primary;
}

.react-datepicker__day--disabled {
  color: var(--text-color-tertiary);
}

.react-datepicker__day:not([aria-disabled='true']):hover,
.react-datepicker__month-text:not([aria-disabled='true']):hover,
.react-datepicker__quarter-text:not([aria-disabled='true']):hover,
.react-datepicker__year-text:not([aria-disabled='true']):hover {
  @apply text-inverse bg-fill-primary rounded-full;
}

.react-datepicker__day--disabled:hover,
.react-datepicker__month-text--disabled:hover,
.react-datepicker__quarter-text--disabled:hover,
.react-datepicker__year-text--disabled:hover {
  @apply rounded-full bg-transparent;
  color: var(--text-color-tertiary);
}

.react-datepicker__day--today {
  @apply font-12-bold text-blue-primary;
}

.react-datepicker__day--outside-month {
  background-color: var(--background-color-tertiary) !important;
  @apply text-tertiary;
}
