$bezier: cubic-bezier(0.23, 1, 0.32, 1);

.form-group--datepicker {
  // input styling
  input[type='date']::before {
    content: attr(placeholder);
    color: $datepicker-calendar-color;
    width: 100%;
  }
  /* hide our custom/fake placeholder text when in focus to show the default
     * 'mm/dd/yyyy' value and when valid to show the users' date of birth value.
     */
  input[type='date']:focus::before,
  input[type='date']:valid::before {
    display: none;
  }

  input[type='date']::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
  }

  .form-group {
    &__label {
      pointer-events: none;
    }

    &__input {
      display: inline-block;
      position: relative;
      width: $datepicker-input-width;
    }
  }

  .button {
    &--clean {
      opacity: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }

    &--icon-only {
      position: absolute;
      right: 20px;
      top: $spacing--s;
      z-index: 1;
    }
  }
  // mimic active style
  .button--clean:focus + input[type='text'],
  .open {
    @include transition(border-color, $transition-duration--fast);
    @include form-field--border-interaction-color;
    border-style: solid;
    border-width: 2px;
    padding: $text-field-spacing-active;
    // viewport l
    @include viewport--l {
      padding: $text-field-spacing-active--l;
    }

    padding-right: 59px;
  }

  .icon {
    svg {
      fill: $datepicker-calendar-color;
    }
  }

  &.form-group--error {
    .icon {
      svg {
        @include form-field--feedback-color;
      }
    }
    // mimic error style on input
    .button--clean:focus + input[type='text'],
    .open {
      border-color: $color--negative;
    }
  }
  // all icons blue except error/disabled state
  &:not(.form-group--error):not(.form-group--disabled) .button--icon-only svg {
    fill: $color-brand--one;
  }

  // disable pointer events disabled state icon
  &.form-group--disabled {
    .button--icon-only svg {
      cursor: not-allowed;
    }
  }
}

// adjusted native css from flatpckr. do not replace with a new version from flatpckr, this one is randstad-themed.
.flatpickr-calendar {
  animation: none;
  background: $color--white;
  border: 1px solid $color--grey;
  border-radius: 4px;
  box-sizing: border-box;
  direction: ltr;
  display: none;
  font-size: 16px;
  line-height: $baseline * 2.4;
  opacity: 0;
  padding: $baseline * 2;
  position: absolute;
  text-align: center;
  touch-action: manipulation;
  visibility: hidden;

  #{text-fields()} {
    min-height: 0;
  }

  .clear {
    bottom: $spacing--m;
    color: $color-brand--one;
    cursor: pointer;
    position: absolute;
    right: 35px;
    text-decoration: underline solid transparent;
    transition: text-decoration 0.3s ease;

    &:hover {
      text-decoration: underline solid $color-brand--one;
    }
  }

  &.open,
  &.inline {
    min-height: $baseline * 44.5;
    opacity: 1;
    visibility: visible;
  }

  &.open {
    display: inline-block;
    z-index: 99999;
  }

  &.inline {
    display: block;
    position: relative;
    top: $baseline * 0.2;
  }

  &.static {
    position: absolute;
    top: calc(100% + 2px);
  }

  &.static.open {
    display: block;
    z-index: 999;
  }

  &.hasWeeks.open {
    min-width: 400px;
  }

  &.animate.open {
    animation: fpFadeInDown 500ms $bezier;
  }

  &.animate.arrowBottom.open {
    margin-top: $baseline * -5.2;
  }

  &:before,
  &:after {
    border: solid transparent;
    content: '';
    display: block;
    height: 0;
    left: 22px;
    position: absolute;
    pointer-events: none;
    width: 0;
  }

  &:before {
    border-width: 5px;
    margin: 0 -5px;
  }

  &:after {
    border-width: 4px;
    margin: 0 -4px;
  }

  &:focus {
    outline: 0;
  }
}

.flatpickr-wrapper {
  display: inline-block;
  position: relative;
}

.flatpickr-months {
  display: flex;
  padding-bottom: $spacing--s;

  .flatpickr-month {
    background: transparent;
    color: $color-brand--two;
    fill: $color-brand--two;
    flex: 1;
    height: $baseline * 3.4;
    line-height: 1;
    position: relative;
    text-align: center;
    user-select: none;
  }

  .flatpickr-prev-month,
  .flatpickr-next-month {
    color: $color-brand--two;
    cursor: pointer;
    fill: $color-brand--one;
    height: $baseline * 3.4;
    padding: $spacing--xs;
    text-decoration: none;
    top: 0;
    z-index: 3;

    &.flatpickr-disabled {
      display: none;
    }

    i {
      position: relative;
    }

    &:hover {
      color: $datepicker-calendar-color-hover;
    }

    svg {
      height: $spacing--s;
      width: $baseline * 2;

      path {
        transition: fill 0.1s;
      }
    }
  }

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

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

.flatpickr-current-month {
  color: inherit;
  display: inline-block;
  font-size: $baseline * 1.8;
  font-weight: 300;
  height: $baseline * 3.4;
  left: 14.5%;
  line-height: inherit;
  position: absolute;
  padding: 9px 0 0 0;
  text-align: center;
  transform: translate3d(0);
  width: 75%;

  input.cur-year {
    background: transparent;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    cursor: text;
    font-family: inherit;
    height: auto;
    margin: 0;
    padding: 0;
    pointer-events: none;
    vertical-align: initial;
    // hide default select buttons
    -webkit-appearance: textfield;
    -moz-appearance: textfield;

    &:focus {
      outline: 0;
    }

    &[disabled],
    &[disabled]:hover {
      color: $color-brand--two;
      font-size: 100%;

      + .arrowUp {
        opacity: 0;
      }
      + .arrowUp + .arrowDown {
        opacity: 0;
      }
    }
  }

  span.cur-month {
    color: inherit;
    display: inline-block;
    font-family: inherit;
    margin-right: 2px;
    padding: 0;
    width: auto;
  }
}

//Year Wrapper

.numInputWrapper {
  height: auto;
  position: relative;

  // Year Wrapper --> input field specs and ios fix including prefix
  & input {
    display: inline-block;
    width: 100%;

    &::-ms-clear {
      display: none;
    }

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none;
    }

    //ios fix
    &.numInput.cur-year[disabled] {
      background: none;
      border: none;
      opacity: 1;
      padding: 0;
      text-overflow: unset;
      -webkit-text-fill-color: $color-brand--two;
    }
  }

  & span {
    box-sizing: border-box;
    cursor: pointer;
    height: 50%;
    left: 50px;
    line-height: 50%;
    position: absolute;

    &:after {
      content: '';
      display: block;
      position: absolute;
    }

    svg {
      height: auto;
      width: inherit;

      path {
        fill: rgba(0, 0, 0, 0.5);
      }
    }

    &.arrowUp {
      border-bottom: 0;
      top: 0;

      &:after {
        border-bottom: 5px solid $color-brand--one;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        top: 30%;
      }
    }

    &.arrowDown {
      top: 50%;

      &:after {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid $color-brand--one;
        top: 26%;
      }
    }
  }
}

.flatpickr-current-month .numInputWrapper {
  display: inline-block;
  margin-left: 2px;
  width: 6ch;

  span.arrowUp:after {
    border-bottom-color: $color-brand--one;
  }

  span.arrowDown:after {
    border-top-color: $color-brand--one;
  }
}

.flatpickr-weekdays {
  align-items: center;
  background: transparent;
  display: flex;
  height: $baseline * 2.8;
  margin-bottom: $spacing--xs;
  overflow: hidden;
  text-align: center;
  width: 100%;

  .flatpickr-weekdaycontainer {
    display: flex;
    flex: 1;
  }
}

span.flatpickr-weekday {
  background: transparent;
  color: $datepicker-calendar-color;
  cursor: default;
  display: block;
  flex: 1;
  line-height: 1;
  margin: 0;
  text-align: center;
}

.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0 0;
}

.flatpickr-days {
  align-items: flex-start;
  display: flex;
  overflow: hidden;
  position: relative;

  &:focus {
    outline: 0;
  }
}

.dayContainer {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 307.875px;
  min-width: 307.875px;
  opacity: 1;
  outline: 0;
  padding: 0;
  text-align: left;
  transform: translate3d(0);
  width: 307.875px;

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

.flatpickr-day {
  background: none;
  border: 2px solid transparent;
  border-radius: $baseline * 15;
  box-sizing: border-box;
  color: $color-brand--two;
  cursor: pointer;
  display: inline-flex;
  flex-basis: 14.2857143%;
  font-weight: 400;
  height: $baseline * 4;
  justify-content: center;
  line-height: $baseline * 3.5;
  margin-bottom: $baseline * 0.6;
  max-width: 40px;
  position: relative;
  text-align: center;
  width: 14.2857143%;

  &.inRange,
  &.prevMonthDay.inRange,
  &.nextMonthDay.inRange,
  &.today.inRange,
  &.prevMontDay.today.inRange,
  &.nextMonthDay.today.inRange,
  &:hover,
  &:focus,
  &.nextMonthDay:hover,
  &.nextMonthDay:focus,
  &.prevMonthDay:hover,
  &.prevMonthDay:focus {
    cursor: pointer;
    border: 2px solid $color-brand--one;
    outline: 0;
  }

  &.today {
    color: $color-brand--one;
  }

  &.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 {
    background: $color-brand--one;
    border-color: $color-brand--one;
    box-shadow: none;
    color: $color--white;
  }

  &.selected.startRange,
  &.startRange.startRange,
  &.endRange.startRange {
    border-radius: 50px 0 0 50px;
  }

  &.selected.endRange,
  &.startRange.endRange,
  &.endRange.endRange {
    border-radius: 0 50px 50px 0;
  }

  &.inRange {
    border-radius: 0;
    box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  }

  &.flatpickr-disabled,
  &.flatpickr-disabled:hover,
  &.prevMonthDay[disabled],
  &.nextMonthDay[disabled],
  &.notAllowed,
  &.notAllowed.prevMonthDay,
  &.notAllowed.nextMonthDay {
    @include color-dark-shade-main;
    background: transparent;
    border-color: transparent;
    // color: $color--grey;
    cursor: not-allowed;
    background: linear-gradient(
      to left top,
      transparent 47.75%,
      currentColor 49.5%,
      currentColor 50.5%,
      transparent 52.25%
    );
  }

  &.week.selected {
    border-radius: 0;
    box-shadow: -5px 0 0 $color-brand--one, 5px 0 0 $color-brand--one;
  }

  &.hidden {
    visibility: hidden;
  }
}

.rangeMode .flatpickr-day {
  margin-top: $baseline * 0.1;
}

.flatpickr-weekwrapper {
  float: left;

  .flatpickr-weeks {
    box-shadow: 1px 0 0 #e6e6e6;
    margin-right: 4px;
    padding: 0 12px;
  }

  .flatpickr-weekday {
    float: none;
    line-height: $baseline * 2.8;
    width: 100%;
  }

  span.flatpickr-day,
  span.flatpickr-day:hover {
    background: transparent;
    border: none;
    color: $datepicker-calendar-color;
    cursor: default;
    display: block;
    top: $baseline * 1.2;
    width: 20px;
  }
}

.flatpickr-innerContainer {
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
}

.flatpickr-rContainer {
  box-sizing: border-box;
  display: inline-block;
  padding: 0;
}

.flatpickr-input[readonly] {
  cursor: pointer;
}

@keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0);
  }
}