/*
 * TEAM: frontend_infra
 * style overloads for react-datepicker
 */

 // Old OOCSS dependencies, related to EditableField usage?
.input-group {
  .react-datepicker__input-container, .react-datepicker-wrapper {
    display: block !important;
    position: relative !important;
    overflow: auto !important;
  }

  & > .form-control {
    float: none !important;
  }
}

.input-group .react-datepicker__input-container
 .react-datepicker-popper {
  z-index: 10 !important;
}

 .react-datepicker {
  border: 1px solid #CED7DE !important;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05) !important;
  border-radius: 0px !important;
  margin: 3px 0 !important;
  font-size: 11px !important;
  display: flex;
}

.react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header {
  font-size: 13px !important;
  font-weight: 700 !important;
}

.react-datepicker__header {
  background: transparent !important;
  border-bottom: none !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  padding: 0 !important;
}

.react-datepicker__header--time {
  border-bottom: 1px solid #EDF3F7 !important
}

.react-datepicker__current-month, .react-datepicker__header--time {
  line-height: 40px !important;
}

.react-datepicker__navigation {
  border: 2px solid #6E7881 !important;
  width: 10px !important;
  height: 10px !important;
  padding: 0 !important;
  outline: none !important;
  transform: translate(0, 50%) rotate(135deg) !important;
  transition: border-color 150ms ease-in-out !important;
}

.react-datepicker__navigation:hover {
  border-color: #18191A !important;
}

.react-datepicker__navigation--previous {
  border-left: none !important;
  border-top: none !important;
  left: 16px !important;
}

.react-datepicker__navigation--next {
  border-right: none !important;
  border-bottom: none !important;
  right: 16px !important;
}

// When time selection is open, move the right arrow over more
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 101px !important;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover,
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #265DF1 !important;
}

.react-datepicker__day-names {
  padding: 5px 8px !important;
  border: 1px solid #EDF3F7 !important;
  border-left: none !important;
  border-right: none !important;
}

.react-datepicker__day-name {
  line-height: 20px !important;
  color: #6E7881 !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
}

.react-datepicker__day-name,.react-datepicker__day {
  width: 24px;
  line-height: 24px;
  margin: 2px;
}

.react-datepicker__day {
  border-radius: 50% !important;
  text-align: center !important;
  font-size: 12px;
}

.react-datepicker__day:hover {
  box-shadow: inset 0 0 0 3px #CED7DE !important;
  background-color: transparent !important;
  border-radius: 50% !important;
}

.react-datepicker__day:active {
  box-shadow: inset 0 0 0 3px #B0BAC2 !important;
  background-color: transparent !important;
  border-radius: 50% !important;
}

.react-datepicker__day--selected, .react-datepicker__day--keyboard-selected {
  background-color: #3E6BE6 !important;

  &:hover {
    box-shadow: none !important;
    background-color: #265DF1 !important;
    border-radius: 50% !important;
  }

  &:active {
    box-shadow: none !important;
    background-color: #1942B3 !important;
    border-radius: 50% !important;
  }
}

.transmissionApp {
  .react-datepicker__day--selected, .react-datepicker__day--keyboard-selected {
    background-color: #66CC86 !important;

    &:hover {
      background-color: #12B873 !important;
    }

    &:active {
      background-color: #2DA854 !important;
    }
  }
}