@import 'carbon-components/scss/components/date-picker/date-picker';

.oec-date-input__input label {
  margin-top: unset;
}

.oec-calendar-dropdown {
  bottom: 0;
}

.oec-calendar-toggle.oec-calendar-dropdown__toggle {
  margin-top: 0.5rem;
  height: 2.5rem;
}

.oec-calendar-toggle__icon {
  height: 1rem;
}

// *** Hacks for this issue ***
// https://github.com/airbnb/react-dates/issues/1249 :/
.DayPicker {
  visibility: unset;
}

.DayPicker_transitionContainer {
  height: unset !important;
}

.DayPicker_transitionContainer:before {
  content: '';
  display: block;
  padding-top: 100%; /* ratio of 1:1*/
}

.DayPicker_transitionContainer .CalendarMonthGrid__horizontal {
  top: 0;
}
// *** end hacks ***

// Setting calendar dropdown theme colors to match ours
.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
  background: color('primary-dark');
  border: 1px double color('primary-darker');
}

.CalendarDay__selected_span {
  background: color('primary');
  border: 1px double color('primary-darker');
}

.CalendarDay__hovered_span,
.CalendarDay__hovered_span:hover,
.CalendarDay__selected_span:active,
.CalendarDay__selected_span:hover,
.CalendarDay__hovered_span:active {
  background: color('primary-light');
  border: 1px double color('primary-darker');
  color: #fff;
}

.DayPickerKeyboardShortcuts_show__bottomRight::before {
  border-right: 33px solid color('primary');
}

.DayPickerKeyboardShortcuts_show__bottomRight:hover::before {
  border-right: 33px solid color('primary-darker');
}
