$date-picker-width: 296px;

.date-picker {
  display: flex;
}

.date-picker ~ .label {
  order: 1;
}

.date-picker-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  + .date-picker-container {
    margin-left: gutter('sm');
  }
}

@media screen and (max-width: breakpoint('sm')) {
  .date-picker, .date-picker-container {
    width: 100%;
    max-width: 100% !important;
  }
}


.date-picker-input__wrapper {
  display: flex;
  align-items: center;
  position: relative;

  ~ .form-requirement {
    max-height: 200px;
    display: block;
    color: $danger;
    font-weight: 400;
    margin-top: $spacing-2xs;
    overflow: visible;

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

.date-picker.date-picker--simple {
  .date-picker__input {
    width: 120px;
  }
}

.date-picker.date-picker--simple.date-picker--short {
  .date-picker__input {
    width: 5.7rem;
  }
}

.date-picker.date-picker--single {
  .date-picker-container {
    max-width: $date-picker-width;

    @media screen and (max-width: breakpoint('sm')) {
      max-width: 100%;
    }
  }

  .date-picker__input {
    width: 100%;
    // width: $date-picker-width;
  }
}

.date-picker__input {
  display: block;
  position: relative;
  height: 36px;
  max-width: $date-picker-width;
  padding: 0 $spacing-md;
  background-color: $light-gray-3;
  border: none;
  color: $dark;
  border: 1px solid $light-gray-2;
  border-radius: $border-radius;
  transition: .2s ease all;

  @media screen and (max-width: breakpoint('sm')) {
    max-width: 100%;
  }

  &:focus,
  &.focused {
    border-color: $primary;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba($primary,.25);
  }

  &[data-invalid],
  &[data-invalid]:focus {
    border-color: $danger;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba($danger,.25);
  }

  &:disabled {
    background-color: $light-gray-2;
    border: 1px solid $light-gray-1;
    color: $dark-gray-3;
    cursor: not-allowed;
  }

  &:disabled::placeholder {
    opacity: 1;
    color: lighten($light-gray-1, .1);
  }

  &::placeholder {
    color: $light-gray-1;
    opacity: 1;
  }
}

.date-picker__icon {
  position: absolute;
  right: 1rem;
  color: $dark-gray-3;
  cursor: pointer;
  z-index: 1;
  // vertically center icon within parent container on IE11
  top: 50%;
  transform: translateY(-50%);
}

.date-picker__icon ~ .date-picker__input {
  padding-right: $spacing-3xl;
}

.date-picker__input:disabled ~ .date-picker__icon {
  color: $light-gray-1;
  cursor: not-allowed;
}

.date-picker--range
  > .date-picker-container:first-child {
  margin-right: 1px;
}

.date-picker--range .date-picker-container,
.date-picker--range .date-picker__input {
  width: 143.5px;
}

.date-picker--range.date-picker--range-with-time .date-picker-container,
.date-picker--range.date-picker--range-with-time .date-picker__input {
  width: inherit;
}

.date-picker__calendar,
.flatpickr-calendar.open {
  background-color: $light;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: $spacing-2xs $spacing-2xs $spacing-xs $spacing-2xs;
  width: $date-picker-width;
  // height: 336px;
  border-radius: 0;
  border: none;
  overflow: hidden;
  margin-top: -2px;
  box-shadow: $box-shadow-sm;
  border-radius: $border-radius;

  @media screen and (max-width: breakpoint('sm')) {
    max-width: 100%;
  }

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

.date-picker__month,
.flatpickr-month {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  margin-bottom: $spacing-2xs;
}

.date-picker__month .flatpickr-prev-month,
.date-picker__month .flatpickr-next-month,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  padding: 0;
  fill: $dark-gray-2;
  transition: background-color .2s ease;

  &:hover {
    background-color: $light-gray-2;
  }
}

.flatpickr-current-month .numInputWrapper {
  width: 7ch;
}

.date-picker__month .flatpickr-current-month,
.flatpickr-month .flatpickr-current-month {
  font-size: 16px;
  font-weight: 500;
  padding: 0;
}

.date-picker__month .flatpickr-current-month svg,
.flatpickr-month .flatpickr-current-month svg {
  fill: $dark;
}

.date-picker__month .flatpickr-current-month .cur-month,
.flatpickr-month .flatpickr-current-month .cur-month {
  margin-right: $spacing-2xs;
  color: $dark;
}

.date-picker__month .numInputWrapper .numInput,
.flatpickr-month .numInputWrapper .numInput {
  font-weight: 500;
  color: $dark;
  background-color: $light-gray-3;
  border: none;
  border-radius: 0;
  padding: $spacing-2xs;
  // Added in when upgraded to Flatpickr 4.5.5
  -moz-appearance: textfield; /* Firefox */

  &:focus {
    outline: 1px solid $primary;
  }

  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    // Added in when upgraded to Flatpickr 4.5.5
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
  }
}

.date-picker__month .numInputWrapper span.arrowUp,
.date-picker__month .numInputWrapper span.arrowDown,
.flatpickr-month .numInputWrapper span.arrowUp,
.flatpickr-month .numInputWrapper span.arrowDown {
  left: 2.8rem;
  border: none;
  width: 12px;

  &:hover {
    background: none;

    &:after {
      border-bottom-color: $dark;
      border-top-color: $dark;
    }
  }

  &:after {
    border-bottom-color: $dark;
    border-top-color: $dark;
  }
}

.date-picker__month .numInputWrapper span.arrowUp,
.flatpickr-month .numInputWrapper span.arrowUp {
  top: 4px;
}

.date-picker__month .numInputWrapper span.arrowDown,
.flatpickr-month .numInputWrapper span.arrowDown {
  top: 11px;
}

span.date-picker__weekday,
span.flatpickr-weekday {
  color: $dark-gray-3;
  font-weight: 500;
}

.date-picker__day,
.flatpickr-day {
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $dark;
  border-radius: 0;
  border: none;
  transition: all .2s ease;

  &:hover {
    background: $light-gray-2;
    border-radius: $border-radius;
  }

  &:focus {
    // @include focus-outline('outline');
    // outline-color: $primary;
  }
}

.date-picker__days .nextMonthDay,
.date-picker__days .prevMonthDay {
  color: $light-gray-1;
}

.date-picker__day.today,
.flatpickr-day.today {
  position: relative;
  color: $primary;
  font-weight: 600;

  &::after {
    content: '';
    position: absolute;
    display: block;
    bottom: 7px;
    left: 50%;
    transform: translateX(-50%);
    height: 4px;
    width: 4px;
    background: $primary;
  }
}

.date-picker__day.today.no-border,
.flatpickr-day.today.no-border {
  border: none;
}

.date-picker__day.today.selected {
  border: 2px solid $primary;

  &::after {
    display: none;
  }
}

.date-picker__day.disabled,
.flatpickr-day.disabled {
  cursor: not-allowed;
  opacity: 0.5;
  color: $dark-gray-3;

  &:hover {
    background: transparent;
  }
}

.date-picker__day.inRange,
.flatpickr-day.inRange {
  background: lighten($primary, 70%);
  color: darken($primary, 10%);

  &:hover {
    border-radius: 0;
    background: lighten($primary, 60%);
  }
}

.date-picker__day.selected,
.flatpickr-day.selected {
  color: $light;
  background: $primary;
  border-radius: $border-radius;
}

.date-picker__day.startRange.selected,
.flatpickr-day.startRange.selected {
  border-radius: $border-radius 0 0 $border-radius;
  box-shadow: none;
  z-index: 2;
}

.date-piacker__day.endRange.selected,
.flatpickr-day.endRange.selected {
  border-radius: 0 $border-radius $border-radius 0;
}

.date-picker__day.startRange.endRange.selected,
.flatpickr-day.startRange.endRange.selected {
  border-radius: $border-radius;
}



.date-picker__day.endRange,
.flatpickr-day.endRange {
  &:hover {
    border: 1px solid $primary;
    border-radius: 0 $border-radius $border-radius 0;
  }
}

.date-picker__day.endRange.inRange,
.flatpickr-day.endRange.inRange {
  // @include focus-outline('outline');
  background: $primary;
  z-index: 3;
}

.date-picker__day.endRange.inRange.selected,
.flatpickr-day.endRange.inRange.selected {
  color: $light;
  background: $primary;
}

.date-picker__day.startRange.inRange:not(.selected),
.flatpickr-day.startRange.inRange:not(.selected) {
  background: $primary;
  z-index: 3;
}

.date-picker__days,
.dayContainer {
  width: 100%;
  min-width: 100%;
  height: 246px;
  display: flex;
  justify-content: center;
}

.flatpickr-innerContainer,
.flatpickr-rContainer {
  width: 100%;
  height: auto;
}

.date-picker__weekdays,
.flatpickr-weekdays,
.flatpickr-weekdaycontainer {
  width: 100%;
}

.flatpickr-weekdays {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flatpickr-weekdaycontainer {
  display: flex;
}

.flatpickr-months {
  display: flex;
  width: 100%;
  position: relative;
}

.flatpickr-prev-month,
.flatpickr-next-month {
  padding-top: 12px;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: $dark;
}

.flatpickr-next-month.disabled,
.flatpickr-prev-month.disabled {
  svg {
    fill: $dark-gray-3;
    opacity: 0.5;
    cursor: not-allowed;
  }

  &:hover {
    svg {
      fill: $dark-gray-3;
    }
  }
}

.date-picker__calendar.hasTime,
.flatpickr-calendar.hasTime {
  .flatpickr-time {
    width: calc(100% - 2 * #{$spacing-2xs});
    border-radius: $border-radius;
    margin-left: $spacing-2xs;
    margin-right: $spacing-2xs;

    .numInputWrapper {
      position: relative;

      &:hover {
        background: $light-gray-3;
      }
    }

    .numInputWrapper span.arrowUp,
    .numInputWrapper span.arrowDown {
      background: $light;
      border: none;
      border-left: 1px solid $light-gray-2;
      border-right: 1px solid $light-gray-2;
      width: 36px;

      &:after {
        text-align: center;
        border-bottom-color: $dark-gray-2;
        left: 50%;
        transform: translateX(-50%);
      }

      &:hover {
        background: $light-gray-2;
      }
    }

    .numInputWrapper:last-of-type span.arrowUp,
    .numInputWrapper:last-of-type span.arrowDown {
      border-right: none;
    }
  }

  .numInput {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    // height: 100%;
    // top: -4px;
    position: relative;
  }
}

.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
  height: 36px;
  margin-top: $spacing-xs;
  max-height: 36px;
  line-height: 36px;
  border: 1px solid $light-gray-2;

  .numInputWrapper {
    height: 100%;
  }
}

// Skeleton State
.date-picker.skeleton input,
.date-picker__input.skeleton {
  @include skeleton;
  width: 100%;

  &::-webkit-input-placeholder {
    color: transparent;
  }
}

.date-picker.skeleton .label {
  @include skeleton;
  width: 75px;
  height: 14px;
}