// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "../../common";

// react-day-picker does not conform to our naming scheme
/* stylelint-disable selector-class-pattern */

.#{$ns}-daterangepicker {
  display: flex;

  .DayPicker-NavButton--interactionDisabled {
    display: none;
  }

  // ensure min-widths are set correctly for variants of contiguous months, single month, and shortcuts
  &.#{$ns}-daterangepicker-contiguous .DayPicker {
    min-width: $datepicker-min-width + $pt-grid-size;
  }

  &.#{$ns}-daterangepicker-single-month .DayPicker {
    min-width: $datepicker-min-width;
  }

  .DayPicker-Day {
    // we only want outside days to be shown when displaying one month at a time
    // https://github.com/palantir/blueprint/pull/586/files#r98813760
    &--outside {
      visibility: hidden;
    }

    &--hovered-range {
      border-radius: 0;
      color: $blue2;

      // need to disable hover styles for all variants of selected dates

      /* prettier-ignore */
      &:not(.DayPicker-Day--selected, .DayPicker-Day--selected-range, .DayPicker-Day--selected-range-start, .DayPicker-Day--selected-range-end) {
        background-color: $daterangepicker-range-background-color;
      }
    }

    &--selected-range {
      background-color: $daterangepicker-range-background-color-selected;
      border-radius: 0;
      color: $blue2;

      &:hover {
        background-color: $daterangepicker-range-background-color-selected-hover;
        color: $blue2;
      }
    }

    // need to set rounded corners

    /* prettier-ignore */
    &--selected-range-start:not(.DayPicker-Day--selected-range-end, .DayPicker-Day--hovered-range-end) {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }

    /* prettier-ignore */
    &--selected-range-end:not(.DayPicker-Day--selected-range-start, .DayPicker-Day--hovered-range-start) {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }

    &--hovered-range-start:not(.DayPicker-Day--hovered-range-end) {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }

    &--hovered-range-end:not(.DayPicker-Day--hovered-range-start) {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }
  }

  .#{$ns}-dark & {
    .DayPicker-Day {
      &--hovered-range {
        color: $light-gray5;

        /* prettier-ignore */
        &:not(.DayPicker-Day--selected, .DayPicker-Day--selected-range, .DayPicker-Day--selected-range-start, .DayPicker-Day--selected-range-end) {
          background-color: $dark-daterangepicker-range-background-color;
        }
      }

      &--selected-range {
        background-color: $dark-daterangepicker-range-background-color-selected;
        color: $light-gray5;

        &:hover {
          background-color: $dark-daterangepicker-range-background-color-selected-hover;
        }
      }
    }
  }
}

.#{$ns}-daterangepicker-calendars {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
}

.#{$ns}-daterangepicker-timepickers {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;

  .#{$ns}-timepicker-arrow-row:empty + .#{$ns}-timepicker-input-row {
    // when timepicker arrows are not displayed in the daterangepicker, we need a bit of extra margin
    margin: $datepicker-padding 0;
  }
}

.#{$ns}-menu.#{$ns}-daterangepicker-shortcuts {
  min-width: $pt-grid-size * 12;
  padding: 0;
}