.datepicker .mantine-Input-wrapper {
  font-family: unset;
  height: var(--spacing-08);
}

.datepicker .mantine-DateRangePicker-input,
.datepicker .mantine-DatePicker-input {
  background-color: var(--field-enabled);
  border: none;
  border-radius: 0;
  box-shadow: var(--box-shadow-elevation-0);
  color: var(--text-secondary);
  font-size: var(--text-size-02);
  height: var(--spacing-08);
  line-height: var(--spacing-04);
  min-height: var(--spacing-08);
  padding: 0 var(--spacing-02);
}

.datepicker .mantine-DateRangePicker-input:hover,
.datepicker .mantine-DatePicker-input:hover {
  color: var(--text-primary);
}

.datepicker .mantine-DateRangePicker-dropdown,
.datepicker .mantine-DatePicker-dropdown {
  background: var(--field-enabled);
  border: none;
  border-radius: 0;
  box-shadow: var(--box-shadow-elevation-1);
  padding: var(--spacing-04) 11px; /* 11px otherwise not aligned with controls */
}

.datepicker .mantine-UnstyledButton-root {
  border-radius: 0;
  color: var(--text-secondary);
  font-family: unset;
  font-weight: 400;
}

.datepicker .mantine-UnstyledButton-root:hover {
  background: var(--state-overlays-hover);
  color: var(--text-primary);
}

.datepicker .mantine-DateRangePicker-weekday,
.datepicker .mantine-DatePicker-weekday {
  color: var(--text-secondary);
  font-family: unset;
  padding: var(--spacing-02);
}

.datepicker .mantine-DateRangePicker-cell,
.datepicker .mantine-DatePicker-cell {
  border: none;
}

.datepicker .mantine-DateRangePicker-day,
.datepicker .mantine-DatePicker-day {
  background: var(--field-enabled);
  border-radius: 0;
  color: var(--text-secondary);
  font-family: unset;
}

.datepicker .mantine-DateRangePicker-day[data-outside],
.datepicker .mantine-DateRangePicker-day:disabled,
.datepicker .mantine-DatePicker-day[data-outside],
.datepicker .mantine-DatePicker-day:disabled,
.datepicker .mantine-UnstyledButton-root:disabled {
  color: var(--text-disabled);
}

.datepicker .mantine-DateRangePicker-day:hover,
.datepicker .mantine-DateRangePicker-day:focus-visible,
.datepicker .mantine-DatePicker-day:hover,
.datepicker .mantine-DatePicker-day:focus-visible {
  background: var(--state-overlays-hover);
  border: none;
  color: var(--text-primary);
  outline: none;
  text-decoration: none;
}

.datepicker .mantine-DateRangePicker-day[data-in-range] {
  background: var(--state-overlays-selected);
  color: var(--text-primary);
}

.datepicker .mantine-DateRangePicker-day[data-selected],
.datepicker .mantine-DateRangePicker-yearPickerControlActive,
.datepicker .mantine-DateRangePicker-monthPickerControlActive,
.datepicker .mantine-DatePicker-day[data-selected],
.datepicker .mantine-DatePicker-yearPickerControlActive,
.datepicker .mantine-DatePicker-monthPickerControlActive {
  background: var(--state-overlays-selected-inverse);
  color: var(--text-contrast-primary);
  text-decoration: underline;
}

.datepicker
  .mantine-DateRangePicker-calendarHeader
  .mantine-UnstyledButton-root:hover,
.datepicker
  .mantine-DatePicker-calendarHeader
  .mantine-UnstyledButton-root:hover {
  background: transparent;
  color: var(--text-primary);
}