@import "../variables/colors";
@import "../variables/dimensions";

// begin override of react-dates

$calendarBorderWidth: 1px;
$timeEditorWidth: 200px;
$calendarArrowUpSize: $grid-gutter-width;
$timePickerFontSize: 16px;
$timePickerTextHeight: 80px;

.DayPicker {
  z-index: 1;

  &.DayPicker__withBorder {
    box-shadow:$dayPickerShadowColor 0 2px 6px;
    border: 1px solid $dayPickerShadowColor;
    box-sizing: content-box;
  }
}

.DayPickerNavigation_svg__horizontal {
  fill: $primaryColor;
}

.CalendarMonth_caption {
  padding-top: 24px;
  padding-bottom: 4 * $grid-gutter-width;
  color: $blackColor;
  font-size: $panel-title-font-size;

  .btn {
    font-size: $panel-title-font-size;
    padding: 0;
  }
}

.DayPicker_weekHeader {
  color: $blackColor;
}

.CalendarDay__default {
  vertical-align: middle;
}


.DayPicker_calendarInfo__horizontal {
  background: $whiteColor;
}

.CalendarDay__selected,
.CalendarDay__selected_start,
.CalendarDay__selected_start.CalendarDay__selected_span,
.CalendarDay__selected_end.CalendarDay__selected_span,
.CalendarDay__selected_end,
.CalendarDay__selected:hover, .CalendarDay__hovered_span:hover {
  background: $primaryColor;
  border: $calendarBorderWidth double $lightGrayColor;
  color: $whiteColor;
}

.CalendarDay__selected_span, .CalendarDay__hovered_span {
  background: $secondaryColorAlt;
  border: $calendarBorderWidth double $lightGrayColor;
  color: $blackColor;
}

.CalendarDay__selected_span:hover {
  border: $calendarBorderWidth double $lightGrayColor;
  background: $dayPickerSelectedSpanBackGround;
}


// end override of react-dates

.rc-datepicker-container {
  position: absolute;
  z-index: 3;
  top: 42px;

  >.DayPicker {
    &:before {
      content: "";
      transform: rotate(45deg);
      position: absolute;
      top: -5px;
      left: 16px;
      border: 1px solid $dayPickerShadowColor;
      background-color: $whiteColor;
      width: $calendarArrowUpSize;
      height: $calendarArrowUpSize;
      z-index: -1;
    }
  }

  .rc-icon {
    position: relative;
  }
}

.rc-datepicker-predefined-ranges {
  width: 140px;
  margin: $grid-gutter-width;

  .btn.range-predefined-btn {
    margin-top: $grid-gutter-width;
  }
}

.rc-datepicker-single {
  .rc-month-year-dropdown-wrapper {
    margin-bottom: 25px;

    .form-control {
      position: absolute;
      padding: 0;
      top: 17px;
    }


    .month-dropdown {
      left: 62px;
      width: 10 * $grid-gutter-width;
    }

    .year-dropdown {
      left: 172px;
      width: 65px;
    }

  }

  .rc-datepicker-time-editor {
    width: $timeEditorWidth;
    padding: 75px 0 0;

    .rc-datepicker-am-pm-button, .rc-datepicker-colon {
       padding-top: 38px;
    }

    .time-text {
      height: $timePickerTextHeight;
      line-height: $timePickerTextHeight;
      font-size: $timePickerFontSize;
    }

    .btn {
      .rc-icon {
        font-size: $timePickerFontSize;
        margin: 0;
      }
    }
  }
}


