$datepicker-main-color:        #fff !default;
$datepicker-main-background:   #2196F3 !default;
$datepicker-hover-background:  #eee !default;
$datepicker-range-background:  #e2f2ff !default;

.flatpickr-days,
.flatpickr-innerContainer {
  border: none;
}

.flatpickr-months {
  .flatpickr-month {
    color: $datepicker-main-color;
  }

  .flatpickr-prev-month,
  .flatpickr-next-month,
  .flatpickr-month {
    height: 35px;
    box-sizing: border-box;
  }

  .flatpickr-prev-month svg,
  .flatpickr-next-month svg,
  .flatpickr-prev-month:hover svg,
  .flatpickr-next-month:hover svg {
    fill: $datepicker-main-color;
  }

  .flatpickr-prev-month:hover,
  .flatpickr-next-month:hover {
    background-color: rgba(#fff, 0.1);
    transition: background-color 0.25s ease;
  }
}

.flatpickr-current-month span.cur-month,
.flatpickr-current-month input.cur-year {
  font-weight: 400;
  font-size: 18px;
}
.flatpickr-current-month input.cur-year {
  box-shadow: none;
}
.flatpickr-current-month span.cur-month:hover {
  background-color: transparent;
}

.numInputWrapper:hover {
  background-color: transparent;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba($datepicker-main-color, 0.9);
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba($datepicker-main-color, 0.9);
}

span.flatpickr-weekday {
  font-weight: 400;
  color: $datepicker-main-color;
}

.flatpickr-weekdays,
.flatpickr-months .flatpickr-month,
span.flatpickr-weekday {
  background: $datepicker-main-background;
}

.flatpickr-day.today {
  border-color: $datepicker-main-background;

  &:hover,
  &:focus {
    color: inherit;
    background: $datepicker-hover-background;
    border-color: $datepicker-main-background;
  }
}

.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  background: $datepicker-hover-background;
  border-color: $datepicker-hover-background;
}

.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 {
  background: $datepicker-range-background;
  border-color: $datepicker-range-background;
}

.flatpickr-day.inRange {
  border-radius: 0;
  box-shadow: -5px 0 0 $datepicker-range-background, 5px 0 0 $datepicker-range-background;
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  box-shadow: 0 0 0 $datepicker-range-background, 5px 0 0 $datepicker-range-background;
}

.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 {
  color: $datepicker-main-color;
  border-color: $datepicker-main-background;
  background: $datepicker-main-background;
}

.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: -10px 0 0 $datepicker-main-background;
}

.flatpickr-day.selected.startRange + .endRange,
.flatpickr-day.startRange.startRange + .endRange,
.flatpickr-day.endRange.startRange + .endRange {
  box-shadow: -10px 0 0 $datepicker-main-background;
}

.flatpickr-day.week.selected {
  box-shadow: -5px 0 0 $datepicker-main-background, 5px 0 0 $datepicker-main-background;
}

// Fixed when jquery-ui-dialog have higher z-index.
.flatpickr-calendar.open {
  z-index: 999999;
}

// Multi month
.flatpickr-calendar.multiMonth {
  .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
    box-shadow: -5px 0 0 $datepicker-range-background, 2px 0 0 $datepicker-range-background !important;
  }

  .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+7) {
    box-shadow: -5px 0 0 $datepicker-range-background, 5px 0 0 $datepicker-range-background !important;
  }

  .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
    box-shadow: -2px 0 0 $datepicker-range-background, 5px 0 0 $datepicker-range-background !important;
  }

  .dayContainer:not(:last-child) {
    border-right: solid 1px #eee;
  }

  .dayContainer + .dayContainer {
    box-shadow: -1px 0 0 #eee;
  }

  .flatpickr-month:first-of-type {
    border-top-right-radius: 0;
  }
  .flatpickr-month:last-of-type {
    border-top-left-radius: 0;
  }
  .flatpickr-month:not(:first-of-type):not(:last-of-type) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}