.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;
  }

  &::before {
    @extend .fa;
    content: $fa-var-times;
  }

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

.flatpickr-calendar {
  background: $theme-bg;

  &.arrowTop {
    &::after {
      border-bottom-color: lighten($theme-bg-color, percentage($theme-bg-gradient-strength));
    }
  }

  &.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-month {
  color: rgba(white, 0.9);
  fill: rgba(white, 0.9);
}

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-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: lighten($brand-primary, 15%);
}

.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: $brand-primary;
  border-color: $brand-primary;
}

.flatpickr-day.selected.startRange + .endRange,
.flatpickr-day.startRange.startRange + .endRange,
.flatpickr-day.endRange.startRange + .endRange {
  box-shadow: -10px 0 0 $brand-primary;
}

.flatpickr-day.week.selected {
  box-shadow: -5px 0 0 $brand-primary, 5px 0 0 $brand-primary;
}