@import './global/variables.scss';

.datepicker-container {
  /* react-dates renders the week header as a sibling of the calendar
   * and thus cannot control the z-index relative to the rest
   * of the calendar and month/year select menus
   */
  & :global(.DayPicker_weekHeader) {
    display: none;
  }

  & :global(.SingleDatePickerInput__showClearDate) {
    padding-right: 0px;
  }

  & :global(.SingleDatePickerInput_clearDate) {
    padding: 0;
    margin: 0 8px;
  }

  & :global(.SingleDatePickerInput) {
    display: flex;
  }

  & :global(.SingleDatePickerInput_calendarIcon) {
    position: absolute;
    top: 3px;
    right: 0;
    margin: 0;
    padding: 0;
  }
}

.datepicker-clear-icon {
  font-size: 10px;
}

.datepicker-month-container {
  display: flex;
  justify-content: center;

  & > :global(.input-select-wrap) {
    width: 100px;
    margin: 5px;
  }
}

.datepicker-presets {
  padding: 0 0 22px 22px;

  > .btn {
    margin-left: 7px;
  }
}

:global(.DateRangePicker) {
  /* react-dates renders the week header as a sibling of the calendar
  * and thus cannot control the z-index relative to the rest
  * of the calendar and month/year select menus
  */
  & :global(.DayPicker_weekHeader) {
    display: none;
  }

  & :global(.DateRangePickerInput) {
    display: flex;
  }

  & :global(.DateRangePickerInput_calendarIcon) {
    position: absolute;
    top: 3px;
    right: 0;
    margin: 0;
    padding: 0;
  }
}

.is-error {
  :global(.DateRangePickerInput_arrow) {
    border-bottom-color: $ron-burgundy;
    box-shadow: $ron-burgundy 0 1px 0;
  }

  :global(.DateInput_input) {
    border-bottom-color: $ron-burgundy;
    box-shadow: $ron-burgundy 0 1px 0;
  }
}

.input-info {
  display: inline-block;
  padding-top: 6px;
  font-size: 12px;
  line-height: 18px;

  &.danger {
    color: $ron-burgundy;
  }
}