.form-date-picker__wrapper,
.form-date-picker__wrapper.react-datepicker-wrapper {
  display: block;
  inline-size: 100%;
}

.form-date-picker__popper,
.react-datepicker-popper.form-date-picker__popper {
  z-index: var(--z-datepicker) !important;
}

.form-date-picker__input {
  inline-size: 100%;
  block-size: var(--input-height-1);
  min-block-size: var(--input-height-1);
  padding: 0.3em 0.6em;
  border: var(--border-width-1) solid var(--form-control-border);
  border-radius: 0.35em;
  background-color: var(--form-control-bg);
  color: var(--form-control-color);
  box-shadow: none;
}

.form-date-picker__input::placeholder {
  color: var(--form-control-color);
  opacity: 0.55;
}

.form-date-picker__calendar {
  font-size: 0.9rem;
  border: var(--border-width-1) solid var(--form-control-border);
  border-radius: 0.35em;
  background-color: var(--form-control-bg);
  color: var(--form-control-color);
}

.form-date-picker__calendar .react-datepicker__header,
.form-date-picker__calendar .react-datepicker__header-wrapper {
  position: relative;
  padding: 0.65em 2.75em;
  background-color: var(--color-navy);
  color: var(--color-white);
  border-bottom: var(--border-width-1) solid var(--color-chrome-border);
  border-radius: 0;
  text-align: center;
}

.form-date-picker__calendar .react-datepicker__header-wrapper .react-datepicker__header {
  padding: 0;
  border-bottom: none;
}

.form-date-picker__calendar .react-datepicker__current-month,
.form-date-picker__calendar .react-datepicker__day-name {
  color: var(--color-white);
}

.form-date-picker__calendar .react-datepicker__navigation {
  inset-block-start: 0.65em;
  block-size: 1.75em;
  inline-size: 1.75em;
  transform: none;
}

.form-date-picker__calendar .react-datepicker__navigation--previous {
  inset-inline-start: 0.45em;
}

.form-date-picker__calendar .react-datepicker__navigation--next {
  inset-inline-end: 0.45em;
}

.form-date-picker__calendar .react-datepicker__day {
  color: var(--form-control-color);
}

.form-date-picker__calendar .react-datepicker__day--disabled,
.form-date-picker__calendar .react-datepicker__day-name--disabled {
  cursor: default;
  opacity: 0.35;
}

.form-date-picker__calendar
  .react-datepicker__day--today:not(.react-datepicker__day--in-range):not(.react-datepicker__day--in-selecting-range):not(
    .react-datepicker__day--range-start
  ):not(.react-datepicker__day--range-end),
.form-date-picker__calendar
  .react-datepicker__day--today.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--in-range):not(
    .react-datepicker__day--in-selecting-range
  ) {
  border-radius: 0;
  font-weight: var(--font-weight-semibold);
}

.form-date-picker__calendar .react-datepicker__day--in-range:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end),
.form-date-picker__calendar .react-datepicker__day--keyboard-selected.react-datepicker__day--in-range:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end) {
  border-radius: 0;
  background-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-white));
  color: var(--form-control-color);
}

.form-date-picker__calendar .react-datepicker__day--range-start,
.form-date-picker__calendar .react-datepicker__day--range-end,
.form-date-picker__calendar .react-datepicker__day--keyboard-selected.react-datepicker__day--range-start,
.form-date-picker__calendar .react-datepicker__day--keyboard-selected.react-datepicker__day--range-end,
.form-date-picker__calendar .react-datepicker__day--selected {
  border-radius: 0;
  background-color: var(--color-accent);
  color: var(--color-white);
}

.form-date-picker__calendar .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--selecting-range-start):not(.react-datepicker__day--selecting-range-end) {
  border-radius: 0;
  background-color: color-mix(in srgb, var(--color-accent) 22%, var(--color-white));
}

.form-date-picker__calendar .react-datepicker__day--selecting-range-start,
.form-date-picker__calendar .react-datepicker__day--selecting-range-end {
  border-radius: 0;
  background-color: var(--color-accent);
  color: var(--color-white);
}

.form-date-picker__calendar .react-datepicker__day:not([aria-disabled="true"]):hover,
.form-date-picker__calendar .react-datepicker__day--in-range:not([aria-disabled="true"]):hover,
.form-date-picker__calendar .react-datepicker__day--in-selecting-range:not([aria-disabled="true"]):hover,
.form-date-picker__calendar .react-datepicker__day--range-start:not([aria-disabled="true"]):hover,
.form-date-picker__calendar .react-datepicker__day--range-end:not([aria-disabled="true"]):hover,
.form-date-picker__calendar .react-datepicker__day--selecting-range-start:not([aria-disabled="true"]):hover,
.form-date-picker__calendar .react-datepicker__day--selecting-range-end:not([aria-disabled="true"]):hover,
.form-date-picker__calendar .react-datepicker__day--selected:not([aria-disabled="true"]):hover {
  border-radius: 0;
  background-color: var(--color-accent-hover);
  color: var(--color-white);
}

.form-date-picker__calendar .react-datepicker__day--keyboard-selected:not(.react-datepicker__day--in-range):not(.react-datepicker__day--in-selecting-range) {
  border-radius: 0;
  background-color: color-mix(in srgb, var(--color-accent) 18%, var(--color-white));
}

.form-date-picker__calendar .react-datepicker__month-select,
.form-date-picker__calendar .react-datepicker__year-select,
.form-date-picker__calendar .react-datepicker__month-year-select {
  border: var(--border-width-1) solid var(--form-control-border);
  background-color: var(--form-control-bg);
  color: var(--form-control-color);
}