@import '~react-datepicker/dist/react-datepicker-cssmodules.css';

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

div.react-datepicker__input-container > input {
  border: 1px solid #797979;
  border-radius: 3px;
  padding: 9px 12px;
  width: 100%;
  outline: none;
  -webkit-appearance: none;
  color: var(--colorBlue);
}
div.react-datepicker__input-container > input:disabled {
  color: #797979 !important;
}

div.mila-picker {
  background: #f7f7f7;
  box-shadow: 1px 2px 4px #00000029;
  border-radius: 8px;
  font-size: 1em;
  border: none;
  z-index: 2;
  font-family: var(--fontPrimaryFamily);
  overflow: hidden;
}

div.mila-picker div.react-datepicker__triangle {
  display: none;
}

/* Date Picker*/
div.react-datepicker__portal
  div.react-datepicker__day--selected.react-datepicker__day,
div.react-datepicker__portal
  div.react-datepicker__day--keyboard-selected.react-datepicker__day,
div.mila-picker div.react-datepicker__day--selected,
div.mila-picker div.react-datepicker__day--keyboard-selected {
  background-color: var(--colorRed);
  border-radius: 50%;
  color: #ffffff;
}

div.mila-picker div.react-datepicker__header {
  background: #f7f7f7;
  border-bottom: none;
  margin-top: 23px;
  padding: 0;
}

div.mila-picker
  div.react-datepicker__header
  div.react-datepicker__current-month {
  margin-bottom: 17px;
  text-align: center;
  font-size: 16px;
  color: #142046;
  font-weight: 700;
}

div.mila-picker div.react-datepicker__day--disabled,
div.react-datepicker__month-text--disabled,
div.react-datepicker__quarter-text--disabled,
div.react-datepicker__day-name,
div.react-datepicker__day,
div.react-datepicker__time-name,
div.react-datepicker__portal div.react-datepicker__day-name,
div.react-datepicker__portal div.react-datepicker__day {
  margin: 5px;
  color: #142046;
  width: 3rem;
  line-height: 3rem;
}

div.mila-picker div.react-datepicker__day--disabled,
div.react-datepicker__month-text--disabled,
div.react-datepicker__quarter-text--disabled {
  color: #797979;
}

div.mila-picker div.react-datepicker__day-name {
  color: #797979;
}

div.mila-picker button.react-datepicker__navigation {
  top: calc(19px + 1.25rem / 2 - 5px);
  border-width: 1.25rem;
}

div.mila-picker .react-datepicker__navigation--previous,
div.react-datepicker__portal
  .react-datepicker__navigation--previous:not(.react-datepicker__navigation--previous--disabled),
div.react-datepicker__portal
  button.react-datepicker__navigation--previous:hover:not(.react-datepicker__navigation--previous--disabled) {
  border-right-color: #142046;
}

div.mila-picker .react-datepicker__navigation--next,
div.react-datepicker__portal button.react-datepicker__navigation--next,
div.react-datepicker__portal button.react-datepicker__navigation--next:hover {
  border-left-color: #142046;
}

/* Time Picker*/

div.mila-picker div.react-datepicker__header--time {
  display: none;
}
div.mila-picker div.react-datepicker__time-container {
  width: 171px;
  background: #f7f7f7;
  box-shadow: 1px 2px 4px #00000029;
  border-radius: 8px;
}

div.mila-picker div.react-datepicker__time-container .react-datepicker__time {
  background: #f7f7f7;
}

div.mila-picker
  div.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box {
  width: 100%;
}

div.mila-picker
  div.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list::-webkit-scrollbar-track {
  background: #f7f7f7;
}
div.mila-picker
  div.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list::-webkit-scrollbar-thumb {
  height: 45px;
  border-radius: 4px;
  background: #797979;
}

div.mila-picker
  div.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list::-webkit-scrollbar {
  width: 5px;
}

div.mila-picker
  div.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list
  li.react-datepicker__time-list-item {
  text-align: left;
  font-size: 16px;
  height: 35px;
  color: #142046;
  display: flex;
  align-items: center;
}

div.mila-picker
  div.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list
  li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}

div.mila-picker
  div.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list
  li.react-datepicker__time-list-item--selected {
  background: #142046;
  color: #ffffff;
  font-size: 16px;
  font-weight: normal;
}

@media (max-width: 700px) {
  div.mila-picker-mobile div.react-datepicker__month-container {
    width: 100vw;
  }
  div.mila-picker-mobile
    div.react-datepicker__month-container
    div.react-datepicker__month {
    margin-bottom: 20px;
  }

  div.mila-picker-mobile
    div.react-datepicker__time-container
    .react-datepicker__time
    .react-datepicker__time-box
    ul.react-datepicker__time-list {
    min-height: 50vh;
  }
  div.mila-picker-mobile
    div.react-datepicker__time-container
    .react-datepicker__time
    .react-datepicker__time-box
    ul.react-datepicker__time-list:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 5px);
    height: 100%;
    background-image: linear-gradient(
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 85%,
      rgba(255, 255, 255, 0.2) 90%,
      rgba(255, 255, 255, 0.7) 93%,
      rgba(255, 255, 255, 0.9) 96%,
      white 100%
    );
    pointer-events: none;
  }

  div.mila-picker-mobile
    div.react-datepicker__time-container
    .react-datepicker__time
    .react-datepicker__time-box
    ul.react-datepicker__time-list:before {
    transform: rotate(180deg);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 5px);
    height: 100%;
    background-image: linear-gradient(
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 85%,
      rgba(255, 255, 255, 0.2) 90%,
      rgba(255, 255, 255, 0.7) 93%,
      rgba(255, 255, 255, 0.9) 96%,
      white 100%
    );
    pointer-events: none;
  }
  div.mila-picker-mobile
    div.react-datepicker__time-container
    .react-datepicker__time
    .react-datepicker__time-box
    ul.react-datepicker__time-list
    li.react-datepicker__time-list-item {
    justify-content: center;
  }

  div.mila-picker-mobile div.react-datepicker__time-container {
    width: 100vw;
  }

  div.mila-picker-mobile .react-datepicker__week,
  div.mila-picker-mobile .react-datepicker__day-names {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 20px);
    margin: auto;
  }
}

@media (min-width: 700px) {
  div.mila-picker div.react-datepicker__month-container {
    width: 273px;
    height: auto;
  }

  div.mila-picker div.react-datepicker__day--disabled,
  div.react-datepicker__month-text--disabled,
  div.react-datepicker__quarter-text--disabled,
  div.react-datepicker__day-name,
  div.react-datepicker__day,
  div.react-datepicker__time-name {
    width: 22px;
    line-height: 22px;
  }

  div.mila-picker button.react-datepicker__navigation {
    top: calc(19px + 1rem / 2 - 5px);
    border-width: 1rem;
  }
}