/*------------------------------------
  Flatpickr
------------------------------------*/

.flatpickr {
  position: relative;

  .flatpickr-form-control {
    border: none;
    cursor: pointer;

    &[readonly] {
      background-color: transparent;
    }
  }

  .flatpickr-calendar {
    top: $input-height !important;
    left: 0 !important;
    width: auto;
    padding: $flatpickr-calendar-padding-y $flatpickr-calendar-padding-x;
    box-shadow: $flatpickr-calendar-box-shadow;

    &::before,
    &::after {
      display: none;
    }

    &.animate.open {
      animation: $flatpickr-calendar-active-open-animation;
    }
  }

  .flatpickr-months {
    align-items: center;
    margin-bottom: $flatpickr-months-margin-y;
  }

  .flatpickr-current-month,
  .flatpickr-prev-month,
  .flatpickr-next-month {
    padding: 0;
  }

  .flatpickr-current-month {
    display: flex;
    align-items: center;
    width: auto;
  }

  .flatpickr-prev-month,
  .flatpickr-next-month {
    position: static;
    color: $flatpickr-prev-next-btn-icon-color;
    width: $flatpickr-prev-next-btn-icon-width;
    height: $flatpickr-prev-next-btn-icon-height;
    line-height: $flatpickr-prev-next-btn-icon-line-height;
    background-color: $flatpickr-prev-next-btn-icon-bg-color;
    @include border-radius($flatpickr-prev-next-btn-icon-border-radius);

    svg {
      width: $flatpickr-prev-next-btn-icon-svg-width;
      height: $flatpickr-prev-next-btn-icon-svg-height;
      margin-bottom: 0;

      path {
        fill: $flatpickr-prev-next-btn-icon-svg-fill-color;
      }
    }

    &:hover {
      background-color: $flatpickr-prev-next-btn-icon-hover-bg-color;

      svg path {
        fill: $flatpickr-prev-next-btn-icon-svg-hover-fill-color;
      }
    }
  }

  .flatpickr-weekday {
    color: $flatpickr-weekday-color;
    text-transform: uppercase;
    font-weight: $flatpickr-weekday-font-weight;
  }

  .rangeMode .flatpickr-day {
    margin-top: $flatpickr-day-rangeMode-margin-top-offset;
  }

  .flatpickr-monthDropdown-months {
    font-size: $flatpickr-month-dropdown-font-size;
    font-weight: $flatpickr-months-dropdown-font-weight;

    &:hover {
      background-color: $flatpickr-month-dropdown-hover-bg-color;
    }
  }

  .flatpickr-current-month input {
    &.cur-year {
      font-size: $flatpickr-months-and-year-font-size;
      font-weight: $flatpickr-months-and-year-font-weight;
    }
  }

  .flatpickr-day {
    border-color: $flatpickr-border-color;

    &:focus,
    &:hover {
      color: $flatpickr-day-hover-color;
      background-color: $flatpickr-day-hover-bg-color;
    }

    &.selected,
    &.startRange,
    &.endRange,
    &.selected.inRange,
    &.startRange.inRange,
    &.endRange.inRange,
    &.selected:focus,
    &.startRange:focus,
    &.endRange:focus,
    &.selected:hover,
    &.startRange:hover,
    &.endRange:hover,
    &.selected.prevMonthDay,
    &.startRange.prevMonthDay,
    &.endRange.prevMonthDay,
    &.selected.nextMonthDay,
    &.startRange.nextMonthDay,
    &.endRange.nextMonthDay {
      color: $flatpickr-selected-end-start-range-color;
      background-color: $flatpickr-selected-end-start-range-bg-color;
      border-color: $flatpickr-selected-end-start-range-border-color;
    }

    &.inRange {
      color: $flatpickr-day-inrange-color;
      background-color: $flatpickr-day-inrange-bg-color;
      box-shadow: $flatpickr-day-inrange-box-shadow;
    }

    &.inRange,
    &.selected {
      &.prevMonthDay,
      &.nextMonthDay {
        &,
        &:focus,
        &:hover {
          color: $flatpickr-day-in-range-selected-days-hover-color;
          border-color: $flatpickr-day-in-range-selected-days-hover-border-color;
          background-color: $flatpickr-day-in-range-selected-days-hover-bg-color;
        }
      }
    }

    &.today {
      color: $flatpickr-day-today-color;
      border-color: $flatpickr-day-today-border-color;
      background-color: $flatpickr-day-today-bg-color;
    }

    &.prevMonthDay,
    &.nextMonthDay {
      color: $flatpickr-day-prev-and-next-month-day-color;

      &:focus,
      &:hover {
        color: $flatpickr-day-prev-and-next-month-day-hover-color;
        background-color: $flatpickr-day-prev-and-next-month-day-hover-bg-color;
        border-color: $flatpickr-day-prev-and-next-month-day-hover-border-color;
      }
    }

    &.disabled {
      color: $flatpickr-day-disabled-color;

      &:hover {
        color: $flatpickr-day-disabled-hover-color;
        background-color: $flatpickr-day-disabled-hover-bg-color;
        border-color: $flatpickr-day-disabled-hover-border-color;
      }
    }

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

  .numInputWrapper {
    span.arrowUp,
    span.arrowDown {
      display: none;
    }

    &:hover {
      background-color: $flatpickr-numinput-wrapper-hover-bg-color;
    }
  }
}

/* Skins */
.flatpickr-white {
  .flatpickr-form-control,
  .flatpickr-form-control::placeholder {
    color: $flatpickr-white-form-control-color;
  }

  .input-group-text {
    color: $flatpickr-white-form-control-text-color;
  }
}

/* Positions */
.flatpickr-right {
  .flatpickr-calendar {
    right: 0 !important;
    left: auto !important;
  }
}