MetaPhase-Consulting/State-TalentMAP

.larger-date-picker {
  .react-datepicker {
    font-size: 14px;
  }

  .react-datepicker__header {
    padding-top: 1.8em;
  }

  .react-datepicker__month {
    margin: 0.4em 1em;
  }

  .react-datepicker__day-name,
  .react-datepicker__day {
    width: 1.9em;
    line-height: 1.9em;
    margin: 0.166em;
  }

  .react-datepicker__current-month {
    font-size: 14px;
  }

  .react-datepicker__navigation {
    border: none;
    top: .5em;
    line-height: 1.7em;
    border: 0.45em solid transparent;
  }

  .react-datepicker__navigation--previous {
    left: 1em;
  }

  .react-datepicker__navigation--next {
    right: 1em;
  }

  .react-datepicker__navigation-icon::before {
    border-color: $primary-blue;
  }

}

$date-picker-width: 300px;

.date-wrapper-react {
  padding-left: 10px;

  .fa-calendar-o,
  .fa-calendar {
    color: $blue-primary;
    font-size: 20px;
    left: 6px;
    position: relative;
    top: 0;
    z-index: 9;
  }

  .fa-calendar-o:before,
  .fa-calendar:before {
    content: "\f133" !important;
  }

  .fa-times,
  .fa-times-circle {
    color: $color-red;
    font-size: 20px;
    left: $date-picker-width - 50;
    position: relative;
    top: 0;
    z-index: 9;
  }

  .fa-times:hover,
  .fa-times-circle:hover {
    color: $secondary-darkest-2;
  }

  .react-datepicker-wrapper,
  .react-datepicker__input-container {
    margin-inline-start: -22px;
    width: $date-picker-width !important;

    >* {
      cursor: pointer !important;
    }

    input {
      padding-inline-start: 50px;
    }
  }

  .react-datepicker-popper {
    z-index: 2;
  }
}

.date-picker-wrapper {
  position: relative;
  width: 100%;

  .fa-calendar-o,
  .fa-calendar {
    color: $blue-primary;
    font-size: 20px;
    left: 6px;
    position: absolute;
    top: 15px;
    z-index: 1;
  }

  .fa-calendar-o:before,
  .fa-calendar:before {
    content: "\f133" !important;
  }

  .react-datepicker-wrapper,
  .react-datepicker__input-container {
    >* {
      cursor: pointer !important;
    }

    input {
      padding-inline-start: 50px;
    }
  }

  .react-datepicker-popper {
    z-index: 2;
  }
}

.tm-datepicker-wrapper {
  width: 100%;

  .tm-datepicker::placeholder {
    color: $bg-gray-dark-2;
  }

  .tm-date-picker-range {
    font-size: 13px;
    height: 28px;
    border: 1px solid $bg-gray-dark-2;
  }

  .react-datepicker-popper {
    z-index: 10;
  }

  .react-datepicker__close-icon {
    padding: 0px;
    margin: 0px 5px 0px 0px;

    &::after {
      font-size: 20px;
      color: $alert-red;
      line-height: unset;
      background-color: transparent;
    }

    &:hover {
      background-color: transparent;
    }
  }
}

.form-date-picker {
  .react-datepicker-wrapper {
    width: 300px;
  }
}