@import "./properties.css";
@import "../z-index.css";

.ReactDates-overrides {

  /* stylelint-disable-next-line declaration-no-important */
  max-height: 250px !important;

  & .DayPicker {
    background: var(--calendar-day-picker-background);
    border: var(--calendar-day-picker-border);
    box-shadow: var(--calendar-day-box-shadow);
    font-weight: var(--calendar-day-picker-font-weight);
  }

  & .DateRangePicker {
    font-family: var(--calendar-font-family);
    position: absolute;
    z-index: var(--calendar-picker-z-index);
  }

  & .CalendarDay {
    font-size: var(--calendar-day-font-size);
    font-weight: var(--calendar-day-font-weight);

    /* stylelint-disable-next-line declaration-no-important */
    height: var(--calendar-day-height) !important;
    transition: var(--calendar-day-transition);
    will-change: color background-color;
    padding: 10px 0;
    border: 1px solid transparent;
    color: var(--color-birdperson-gray-500);
    width: 35px;
  }

  & .CalendarDay__blocked_calendar,
  & .CalendarDay__blocked_calendar:hover {
    border: none;
    background: none;
    color: var(--color-squanchy-gray-100);
    cursor: not-allowed;
  }

  & .DateRangePickerInput {
    align-items: center;
    border-width: 0;
    display: flex;
    height: 100%;
  }

  & .DateRangePicker,
  & .DateRangePicker > div {
    height: 100%;
  }

  & .DayPickerNavigation_button {
    background-color: var(--calendar-day-picker-background-color);
    border: var(--calendar-day-picker-border);
    color: var(--calendar-icon-color);
    font-size: var(--calendar-icon-font-size);
    outline: none;
    position: absolute;
    top: 12px;
    padding: 6px 9px;
    z-index: 2;
  }

  & .CalendarMonth .CalendarMonth_caption {
    color: var(--calendar-month-caption-color);
    font-size: var(--calendar-month-caption-font-size);
    opacity: 0;
    padding: var(--calendar-month-caption-padding);
    text-transform: var(--calendar-month-caption-text-transform);
    transition: var(--calendar-month-transition);
  }

  & .CalendarMonth .CalendarMonth_table {
    border-collapse: separate;
    border-spacing: 0 var(--calendar-week-spacing);
    position: relative;
  }

  & .CalendarMonthGrid_month__horizontal[class*="hidden"] ~ .CalendarMonthGrid_month__horizontal:before {
    background-color: var(--calendar-month-separator-background-color);
    content: "";
    display: block;
    height: var(--calendar-month-separator-height);
    position: absolute;
    transition: var(--calendar-month-transition);
    top: var(--spacing-small);
    width: var(--calendar-month-separator-width);
  }

  & .CalendarMonthGrid_month__horizontal[class*="hidden"] + .CalendarMonthGrid_month__horizontal:before {
    opacity: 0;
  }

  & .CalendarMonth[data-visible="true"] .CalendarMonth_caption {
    opacity: 1;
  }

  & .CalendarMonth[data-visible="false"]:last-child .CalendarMonth_caption {
    opacity: 0;
  }

  & .DayPicker_weekHeader {
    top: var(--calendar-day-picker-header-top);
  }

  & .DayPicker_weekHeader ul {
    background-color: var(--calendar-week-name-background-color);
    border-color: var(--calendar-week-name-border-color);
    border-style: var(--calendar-week-name-border-style);
    border-width: var(--calendar-week-name-border-width);
    color: var(--calendar-week-name-color);
    font-size: var(--calendar-week-name-font-size);
    font-weight: var(--calendar-week-name-font-weight);
    padding-bottom: var(--calendar-week-padding-bottom);
    padding-top: var(--calendar-week-padding-top);
    text-transform: var(--calendar-day-picker-header-text-transform);
  }

  & .DayPicker_weekHeader ul li {
    font-size: 16px;
    text-transform: capitalize;
    color: var(--color-birdperson-gray-500);
  }

  & .DayPickerNavigation__horizontal {
    color: var(--calendar-active-color);
    position: relative;
  }

  & .DayPickerNavigation_button:first-child {
    left: var(--calendar-day-picker-prev-left);
  }

  & .DayPickerNavigation_button:last-child {
    right: var(--calendar-day-picker-next-right);
  }

  & .CalendarDay__blocked-out-of-range {
    color: var(--calendar-day-out-of-range-color);
  }

  & .CalendarMonthGrid {
    background: var(--calendar-month-grid-background);
  }

  & .CalendarDay__selected_span {
    background-color: var(--calendar-selected-span-background-color);
    color: var(--color-birdperson-gray-500);
  }

  & .CalendarDay__selected_start,
  & .CalendarDay__selected_end,
  & .CalendarDay__selected {
    background-color: var(--calendar-active-color);
    color: var(--color-white);
    font-weight: var(--calendar-day-selected-font-weight);
  }

  & .CalendarDay__selected {
    border-radius: var(--calendar-day-selected-border-radius);
  }

  & .CalendarDay__selected_start {
    border-radius: 999px;
    color: var(--color-white);
  }

  & .CalendarDay__selected_end {
    border-radius: 999px;
    color: var(--color-white);
  }

  & .CalendarDay__selected_span:not([class*="start"]):hover {
    color: var(--calendar-day-color);
    border-color: var(--calendar-day-selected-border-color);
    background-color: var(--calendar-hovered-span);
  }

  & .CalendarDay__selected:hover {
    background: var(--calendar-day-selected-border-color);
    border-color: var(--calendar-day-selected-border-color);
  }

  & .CalendarDay__hovered_span:hover,
  & .CalendarDay__hovered_span {
    background: var(--calendar-hovered-span);
    color: var(--color-birdperson-gray-500);
  }

  & .CalendarDay__hovered_span {
    background-color: var(--color-squanchy-gray-20);
    border-radius: 0;
  }

  & .CalendarDay:active {
    background-color: lighten(var(--calendar-active-color), 30%);
    border-radius: var(--calendar-day-selected-border-radius);
  }

  & .CalendarDay_defaultCursor {
    color: var(--color-squanchy-gray-300);
  }

  & .CalendarDay__default:not([class*="span"]) {
    border-radius: 999px;
  }

  & .CalendarDay__firstDayOfWeek {
    border-radius:
      999px
      0
      0
      999px;
  }

  & .CalendarDay__lastDayOfWeek {
    border-radius:
      0
      999px
      999px
      0;
  }
}