/* Dropdown field showing selection */
.mantine-DatePickerInput-input {
  background-color: var(--bs-primary-bg-subtle);
  border: none;
  box-shadow: var(--bs-box-shadow-sm);
  color: var(--bs-body-color);
}

.mantine-DatePickerInput-input:hover {
  color: var(--bs-primary-text-emphasis);
}

/* Calendar view with selected range */
.mantine-DatePickerInput-dropdown,
.mantine-Popover-dropdown {
  background: var(--bs-primary-bg-subtle);
  border: inherit;
  box-shadow: var(--bs-box-shadow);
  padding: 0.5rem;
}

.mantine-DatePickerInput-day {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-body-color);
}

.mantine-DatePickerInput-day[data-in-range] {
  color: var(--bs-primary);
}

.mantine-DatePickerInput-day[data-selected] {
  background: var(--bs-primary);
  color: var(--text-primary-inverted);
  text-decoration: underline;
}

/* Single month or year selection */
.mantine-PickerControl-pickerControl,
.mantine-DatePickerInput-monthsListControl {
  color: var(--bs-body-color);
}

/* Important tags are required as otherwise mantine media queries will have higher specificity */
.mantine-DatePickerInput-day:hover,
.mantine-PickerControl-pickerControl:hover,
.mantine-DatePickerInput-monthsListControl:hover {
  background: var(--bs-primary) !important;
  color: var(--text-primary-inverted) !important;
}

/* Header inside calendar view */
.mantine-DatePickerInput-calendarHeader {
  color: var(--bs-body-color);
}

.mantine-DatePickerInput-calendarHeaderControlIcon:hover,
.mantine-DatePickerInput-calendarHeader .mantine-UnstyledButton-root:hover {
  background: transparent !important;
  color: var(--bs-primary-text-emphasis);
}

.mantine-DatePickerInput-weekday {
  text-align: center;
}
