/* Dropdown field showing selection */
.mantine-DatePickerInput-input {
  background: var(--input-field-bg);
  border: 1px solid transparent;
  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(--input-field-bg);
  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;
}

.mantine-TimePicker-root {
  width: 100%;
}

.mantine-TimePicker-field {
  border-radius: 0;
  color: var(--bs-secondary);
}

.mantine-TimePicker-field:focus {
  background-color: var(--bs-primary);
  border-radius: 0;
  color: var(--text-primary-inverted);
}

.mantine-TimePicker-field:focus::placeholder {
  color: var(--text-primary-inverted);
}

.mantine-TimePicker-presetControl[data-active] {
  background-color: var(--bs-primary);
  color: var(--text-primary-inverted);
}

.mantine-TimePicker-presetControl[data-active]:hover {
  background-color: var(--bs-primary);
  color: var(--text-primary-inverted);
}

.mantine-TimePicker-label {
  color: var(--text-secondary);
}