@import "../node_modules/react-date-picker/dist/DatePicker";
@import "../node_modules/react-calendar/dist/Calendar";

.custom-date-picker{
  .react-date-picker, .react-daterange-picker {
    width: 100%;
    display: block;
    .react-date-picker__wrapper, .react-daterange-picker__wrapper {
      border: 1px solid $themeGray;
      background-color: $themeWhite;
      @include media-breakpoint-down(md) {
        height: 36px;
      }
      height: 32px;
      border-radius: 0;
      padding-left: 6px;
      width: 100%;
      display: none;
    }
    &--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;
      box-shadow: 0px 0px 25px -3px $themeBlack;
      margin-top: $sizeSmall;
    }
    .react-calendar__tile--active{
      background-color: $themePrimary;
      &:enabled{
        &:hover, &:focus{
          background-color: $themePrimaryHover;
        }
      }
    }
    .react-calendar__tile{
      border-radius: 0;
    }
    .react-calendar__tile--hasActive{
      background-color: $themePrimary;
    }
  }
}