.clear-datepicker {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;

  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;

  color: #ccc;

  &:hover, &:focus {
    color: #aaa;
    text-decoration: none;
  }

  &::before {
    @include icon-fa($fa-var-times);
  }

  input[value=""] ~ &,
  input:not([value]) ~ &,
  input[disabled] ~ &,
  input.disabled ~ & {
    display: none;
  }
}

.flatpickr-calendar {
  @extend .theme-bg;

  box-shadow: $dropdown-box-shadow;

  &::before {
    border-width: $dropdown-arrow-outer-width;
    margin: 0 -#{$dropdown-arrow-outer-width};
  }

  &::after {
    border-width: $dropdown-arrow-width;
    margin: 0 -#{$dropdown-arrow-width};
  }

  &.arrowTop {
    margin-top: $dropdown-spacer;

    &::after {
      border-bottom-color: mix($theme-bg, white, 95%);
    }
  }

  &.arrowBottom {
    margin-top: -$dropdown-spacer;
  }

  &.showTimeInput.hasTime {
    .flatpickr-time {
      border-radius: 0 0 5px 5px;
    }
  }

  &.noCalendar {
    &::after {
      border-bottom-color: white;
    }

    &.showTimeInput.hasTime {
      .flatpickr-time {
        border-top: 0;
        border-radius: 5px;
      }
    }
  }
}

.flatpickr-months {
  .flatpickr-month,
  .flatpickr-prev-month,
  .flatpickr-next-month {
    color: rgba(white, 0.9);
    fill: rgba(white, 0.9);
  }

  .flatpickr-prev-month,
  .flatpickr-next-month {
    &:hover svg {
      fill: lighten(theme-color("primary"), 15%);
    }
  }
}

span.flatpickr-weekday {
  color: rgba(white, 0.9);
}

.flatpickr-days,
.flatpickr-time {
  background: white;
}

.flatpickr-current-month {
  .numInputWrapper {
    span.arrowUp::after {
      border-bottom-color: rgba(white, 0.9);
    }

    span.arrowDown:after {
      border-top-color: rgba(white, 0.9);
    }
  }
}

.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 {
  background: theme-color("primary");
  border-color: theme-color("primary");
}

.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 theme-color("primary");
}

.flatpickr-day.week.selected {
  box-shadow: -5px 0 0 theme-color("primary"), 5px 0 0 theme-color("primary");
}