/* Dresses flatpickr (vendor/css/flatpickr.min.css) in the site's colours, in
   light and dark.  Loaded after aurora.css. */

/* The visible input: a calendar icon where the native control had one. */
.ibx-date, .form-control.ibx-date {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7f74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  padding-right: 2rem;
  cursor: pointer;
}

/* Not .invalid-feedback, which landed on top of the input in the review table's
   row forms.  There, the flex rules give it its own line below the button. */
.ibx-date-error {
  order: 1;
  flex: 1 0 100%;
  width: 0;
  min-width: 100%;
  margin-top: .25rem;
  color: var(--ibx-danger, #b3261e);
  font-size: .8125rem;
  line-height: 1.35;
  white-space: normal;
}

.flatpickr-calendar {
  background: var(--ibx-surface);
  color: var(--ibx-ink);
  border-radius: var(--ibx-radius);
  box-shadow: 0 0 0 1px var(--ibx-line-strong), var(--ibx-shadow-2);
}
.flatpickr-calendar.arrowTop::before { border-bottom-color: var(--ibx-line-strong); }
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--ibx-surface); }
.flatpickr-calendar.arrowBottom::before { border-top-color: var(--ibx-line-strong); }
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--ibx-surface); }

/* Month and year heading */
.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--ibx-ink); fill: var(--ibx-ink); }
.flatpickr-current-month .flatpickr-monthDropdown-months { background: transparent; }
.flatpickr-current-month .flatpickr-monthDropdown-months option { background: var(--ibx-surface); color: var(--ibx-ink); }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: currentColor; }
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { color: var(--au-green); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--au-leaf); }
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month .numInputWrapper:hover,
.numInputWrapper span:hover { background: var(--ibx-surface-3); }
.numInputWrapper span { border-color: var(--ibx-line-strong); }
.numInputWrapper span.arrowUp::after { border-bottom-color: var(--ibx-ink-2); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--ibx-ink-2); }

/* Days */
span.flatpickr-weekday { color: var(--ibx-ink-3); }
.flatpickr-day { color: var(--ibx-ink); }
.flatpickr-day:hover, .flatpickr-day:focus,
.flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover {
  background: var(--ibx-surface-3);
  border-color: var(--ibx-surface-3);
}
.flatpickr-day.today { border-color: var(--au-leaf); }
.flatpickr-day.today:hover, .flatpickr-day.today:focus { background: var(--au-leaf); border-color: var(--au-leaf); color: #fff; }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus,
.flatpickr-day.selected.prevMonthDay, .flatpickr-day.selected.nextMonthDay {
  background: var(--au-green);
  border-color: var(--au-green);
  color: #fff;
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: var(--ibx-ink-3); opacity: .55; }

/* Time row */
.flatpickr-calendar.hasTime .flatpickr-time { border-top-color: var(--ibx-line); }
.flatpickr-time input, .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm { color: var(--ibx-ink); }
.flatpickr-time input:hover, .flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time .flatpickr-am-pm:focus { background: var(--ibx-surface-3); }

/* Month grid */
.flatpickr-monthSelect-month,
.flatpickr-monthSelect-theme-light .flatpickr-monthSelect-month { color: var(--ibx-ink); background: transparent; }
.flatpickr-monthSelect-month:hover, .flatpickr-monthSelect-month:focus { background: var(--ibx-surface-3); border-color: var(--ibx-surface-3); }
.flatpickr-monthSelect-month.selected, .flatpickr-monthSelect-month.selected:hover, .flatpickr-monthSelect-month.selected:focus {
  background: var(--au-green);
  border-color: var(--au-green);
  color: #fff;
}