@import '../utils/theme/variables.scss';
@import '~react-dates/lib/css/_datepicker.css';

$date-picker-width-input: 150px !default;
$date-picker-month-header-background: $brc-azure !default;
$date-picker-month-header-color: $brc-white !default;

$date-picker-z-index: 100 !default;

$date-picker-input-background: $brc-gradientGrey !default;
$date-picker-input-background-hover: $brc-gradientDarkGrey !default;
$date-picker-input-background-open: $brc-gradientDarkGrey !default;
$date-picker-input-border-color: $brc-silver !default;
$date-picker-input-border-color-focused: $brc-azure !default;
$date-picker-input-placeholder-color: $brc-coolGrey !default;

$date-picker-default-day-border: $brc-silver !default;
$date-picker-default-day-background: $brc-paleGrey !default;
$date-picker-default-day-background-hover: $brc-cloudyGrey !default;
$date-picker-default-day-color: $brc-darkGreyBlue !default;
$date-picker-default-day-color-hover: $brc-darkGreyBlue !default;
$date-picker-blocked-day-background: $brc-white !default;
$date-picker-blocked-day-color: $brc-coolGrey !default;
$date-picker-blocked-day-border: $date-picker-default-day-border !default;
$date-picker-selected-day-background: $brc-azure !default;
$date-picker-selected-day-color: $brc-darkGreyBlue !default;
$date-picker-selected-day-border: $date-picker-default-day-border !default;
$date-picker-selected-day-background-hover: $brc-azure !default;
$date-picker-selected-day-color-hover: $brc-darkGreyBlue !default;
$date-picker-selected-day-border-hover: $brc-azure !default;
$date-picker-hovered-interval-day-background: $brc-azure10 !default;
$date-picker-hovered-interval-day-border: $brc-azure !default;
$date-picker-hovered-interval-day-color: $brc-darkGreyBlue !default;
$date-picker-selected-interval-day-background: $brc-azure30 !default;
$date-picker-selected-interval-day-border: $brc-azure10 !default;
$date-picker-selected-interval-day-color: $brc-darkGreyBlue !default;
$date-picker-outside-day-background: $brc-white !default;

.date-picker {
  font-size: 14px;

  &.has-focus {
    .SingleDatePickerInput {
      border: 1px solid $date-picker-input-border-color-focused;
    }
  }

  .SingleDatePickerInput {
    height: 36px;
    border-radius: 2px;
    background: $date-picker-input-background;
    border: 1px solid $date-picker-input-border-color;

    &:hover {
      background: $date-picker-input-background-hover;
    }

    &.SingleDatePickerInput__showClearDate {
      padding-right: 0;
    }

    .SingleDatePickerInput_clearDate {
      margin-right: 30px;

      svg {
        * {
          fill: $brc-coolGrey;
        }
      }
    }

    .SingleDatePickerInput_calendarIcon {
      height: 100%;

      svg {
        * {
          fill: $brc-coolGrey;
        }
      }
    }

    .DateInput {
      background: transparent;
      width: $date-picker-width-input;
      height: 100%;

      .DateInput_input {
        font-weight: $brc-semibold;
        font-size: 14px;
        color: $brc-darkGreyBlue;
        background: transparent;
        height: 100%;
        border: 0;

        @include placeholder {
          color: $date-picker-input-placeholder-color;
        }
      }

      .DateInput_fangShape {
        fill: $date-picker-month-header-background;
      }
    }
  }

  &.is-small {
    .SingleDatePickerInput {
      height: 25px;

      .DateInput_input {
        font-size: 12px;
      }

      .SingleDatePickerInput_calendarIcon {
        padding: 0px;
        svg {
          height: 11px;
        }
      }

      .SingleDatePickerInput_clearDate {
        padding: 0px;
        svg {
          height: 11px;
        }
      }
    }
  }

  .SingleDatePicker_picker {
    z-index: $date-picker-z-index;

    .DayPicker {
      width: 229px !important;
      box-shadow: none !important;

      .DayPicker_weekHeaders {
        margin-left: 0;

        .DayPicker_weekHeader {
          top: 35px;

          .DayPicker_weekHeader_ul {
            color: $date-picker-month-header-color;
            font-size: 12px;

            // HACK to hide the 9px padding around the month grid
            .DayPicker_weekHeader_li {
              width: 32px !important;

              &:first-child,
              &:last-child {
                width: 34px !important;
              }
            }
          }
        }
      }

      .DayPickerNavigation_prev,
      .DayPickerNavigation_next {
        position: absolute;
        top: 15px;

        * {
          fill: $date-picker-month-header-color;
        }
      }
      .DayPickerNavigation_prev {
        left: 10px;
      }
      .DayPickerNavigation_next {
        right: 10px;
      }

      .DayPicker_transitionContainer {
        height: 199px !important;
      }

      .CalendarDay {
        // HACK to hide the 9px padding around the month grid
        width: 32px !important;
        &:first-child,
        &:last-child {
          width: 34px !important;
        }

        border: 1px solid $date-picker-default-day-border;
        font-weight: $brc-semibold;

        &.CalendarDay__default_2 {
          color: $date-picker-default-day-color;
          background-color: $date-picker-default-day-background;

          &:hover {
            color: $date-picker-default-day-color-hover;
            background-color: $date-picker-default-day-background-hover;
            border-color: $brc-cloudyGrey;
          }
        }

        &.CalendarDay__outside {
          background-color: $date-picker-outside-day-background;
        }

        &.CalendarDay__blocked_calendar {
          background-color: $date-picker-blocked-day-background;
          color: $date-picker-blocked-day-color;
          border-color: $date-picker-blocked-day-border;
          opacity: 0.6;
          font-weight: $brc-regular;
        }

        &.CalendarDay__selected {
          background-color: $date-picker-selected-day-background;
          color: $date-picker-selected-day-color;
          border-color: $date-picker-selected-day-border;

          &:hover {
            background-color: $date-picker-selected-day-background-hover;
            color: $date-picker-selected-day-color-hover;
            border-color: $date-picker-selected-day-border-hover;
          }
        }

        .CalendarDay__hovered_span {
          background-color: $date-picker-hovered-interval-day-background;
          border: 1px solid $date-picker-hovered-interval-day-border;
          color: $date-picker-hovered-interval-day-color;
        }

        .CalendarDay__selected_span {
          background-color: $date-picker-selected-interval-day-background;
          border: 1px solid $date-picker-selected-interval-day-border;
          color: $date-picker-selected-interval-day-color;
        }
      }

      .CalendarMonthGrid {
        left: 0;

        .CalendarMonth {
          .CalendarMonth_caption {
            // HACK to hide the 9px padding around the month grid
            margin-left: -9px;
            margin-right: -9px;

            background-color: $date-picker-month-header-background;
            color: $date-picker-month-header-color;
            padding-top: 10px;
            padding-bottom: 26px;
            font-size: 15px;
          }
        }
      }
    }
  }
}
