.react-date-picker, .react-daterange-picker {
  width: 100%;
  .react-date-picker__wrapper, .react-daterange-picker__wrapper {
    border: 1px solid $separator-color;
    background-color: $white;
    height: 36px;
    @include media-breakpoint-down(sm){
      height: 32px;
    }
    border-radius: 0;
    padding-left: 6px;
    width: 100%;
  }
  &--disabled{
    .react-date-picker__wrapper, .react-daterange-picker__wrapper {
      background-color: #eee;
    }
  }
  .react-date-picker__inputGroup__input, .react-daterange-picker__inputGroup__input {
    border: 0;
    outline: 0;
    &:invalid {
      background-color: transparent;
    }
    &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
      color: transparent;
      opacity: 0; /* Firefox */
    }

    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: transparent;
    }

    &::-ms-input-placeholder { /* Microsoft Edge */
      color: transparent;
    }
  }
  .react-date-picker__calendar, .react-daterange-picker__calendar{
    z-index: 1000;
  }
  .react-date-picker__calendar .react-calendar, .react-daterange-picker__calendar .react-calendar{
    border: 0;
    @include depth(1);
    margin-top: $size-small;
  }
  .react-calendar__tile--active{
    background-color: $theme-color-1;
    &:enabled{
      &:hover, &:focus{
        background-color: $theme-color-3;
      }
    }
  }
  .react-calendar__tile{
    border-radius: 0;
  }
  .react-calendar__tile--hasActive{
    background-color: $theme-color-1;
  }
}

.has-error{
  .react-date-picker__wrapper, .react-daterange-picker__wrapper {
    border-color: $error-color;
  }
}