@use '../../../../shared/styles/variables' as *;

.react-datepicker {
  border: none;
  border-radius: 14px;
  box-shadow: $shadow-popover-soft;
  font-family: inherit;
  overflow: hidden;
}

.react-datepicker__header {
  background: $color-surface-muted;
  border-bottom: 1px solid $color-border;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  color: $color-text-heading;
  font-weight: 600;
}

.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected,
.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list
  li.react-datepicker__time-list-item--selected {
  background: $color-primary;
  color: $color-text-inverse;
}

.react-datepicker__day--in-range,
.react-datepicker__day--in-selecting-range {
  background: $color-primary-soft;
  color: $color-primary;
}

.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover,
.react-datepicker__year-text:hover {
  background: $color-surface-hover;
}
