
/* Customise flatpickr */
* {
    --calendarPadding: 24px;
    --daySize: 36px;
    --daysWidth: calc(var(--daySize)*7);
}

@keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.flatpickr-calendar {
    border: inherit;
    @apply bg-base-200 rounded-lg shadow-lg border border-base-200 left-1/2;
    margin-left: calc(calc(var(--daysWidth) + calc(var(--calendarPadding)*2))*0.5*-1);
    padding: var(--calendarPadding);
    width: calc(var(--daysWidth) + calc(var(--calendarPadding)*2));
}

.flatpickr-resetable-container {
    position: relative;
}

.flatpickr-clear-button {
  @apply link-neutral;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 1;
  font-size: 0.8em;
}

.flatpickr-input[value=""] + .flatpickr-clear-button,
.flatpickr-input:not([value]) + .flatpickr-clear-button {
  display: none;
}

@screen lg {
    .flatpickr-calendar {
        @apply left-0 right-auto;
        margin-left: 0;
    }
}

.flatpickr-right.flatpickr-calendar {
    @apply right-0 left-auto;
    margin-left: 0;
}

.flatpickr-calendar.animate.open {
    animation: fpFadeInDown 200ms ease-out;
}

.flatpickr-calendar.static {
    position: absolute;
    top: calc(100% + 4px);
}

.flatpickr-calendar.static.open {
    z-index: 20;
}

.flatpickr-days {
    width: var(--daysWidth);
}

.dayContainer {
    width: var(--daysWidth);
    min-width: var(--daysWidth);
    max-width: var(--daysWidth);
}

.flatpickr-day {
    @apply bg-base-100 text-sm font-medium text-base-content;
    max-width: var(--daySize);
    height: var(--daySize);
    line-height: var(--daySize);
}

.flatpickr-day,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    border: none;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
    background: none;
}

.flatpickr-day,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange,
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange,
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
    border-radius: 0;
}

.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange {
    @apply rounded-l-md;
}
.flatpickr-day.selected.endRange,
.flatpickr-day.endRange.endRange {
    @apply rounded-r-md;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
    @apply text-base-content;
}

.rangeMode .flatpickr-day {
    margin: 0;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    @apply bg-primary text-neutral-content rounded-md;
}

.flatpickr-innerContainer {
    overflow: visible;
}

.flatpickr-day.today {
  @apply border-0 border-b-2 border-neutral-content/40;
  border-style: solid;
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus,
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    @apply bg-primary text-neutral-content rounded-md;
}

.flatpickr-day.inRange,
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: none;
}

.flatpickr-months {
    align-items: center;
    margin-top: -8px;
    margin-bottom: 6px;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    position: static;
    height: auto;
    @apply text-base-content hover:text-base-content;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    width: 7px;
    height: 11px;
    fill: currentColor;
}


.flatpickr-months .flatpickr-prev-month {
    margin-left: -10px;
}

.flatpickr-months .flatpickr-next-month {
    margin-right: -10px;
}

.flatpickr-months .flatpickr-month {
    @apply text-base-content;
    height: auto;
    line-height: inherit;
    overflow: visible;
}

.flatpickr-current-month {
    @apply text-sm font-medium;
    position: static;
    height: auto;
    width: auto;
    left: auto;
    padding: 0;
}

.flatpickr-current-month span.cur-month {
    @apply font-medium m-0;
}

.flatpickr-current-month span.cur-month:hover {
    background: none;
}


.numInputWrapper:hover {
    background: none;
}

.numInputWrapper span {
    display: none;
}

span.flatpickr-weekday {
    @apply text-base-content font-medium text-xs;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
    display: none;
}

.flatpickr-year-select-wrapper  {
  @apply ml-4;
}

.flatpickr-year-select-wrapper select {
  @apply input-primary;
  width: 85px;
}

/* Year plugin */
.flatpickr-current-month .numInputWrapper {
    display: none;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-months select {
  border-style: solid;
  @apply px-4 py-2 border border-base-300 bg-base-100 rounded-md text-sm;
}