// 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;
  white-space: nowrap;

  // indent first navbar a bit
  .DayPicker:first-of-type .#{$ns}-datepicker-navbar {
    left: $datepicker-padding;
  }

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

  .#{$ns}-daterangepicker-timepickers {
    display: flex;
    justify-content: space-around;
  }

  // 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;

      // need to disable hover styles for all variants of selected dates
      // stylelint-disable max-line-length
      &:not(.DayPicker-Day--selected):not(.DayPicker-Day--selected-range):not(.DayPicker-Day--selected-range-start):not(.DayPicker-Day--selected-range-end) {
        background-color: $daterangepicker-range-background-color;
      }
      // stylelint-enable max-line-length
    }

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

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

    // need to set rounded corners
    // stylelint-disable max-line-length
    &--selected-range-start:not(.DayPicker-Day--selected-range-end):not(.DayPicker-Day--hovered-range-end) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &--selected-range-end:not(.DayPicker-Day--selected-range-start):not(.DayPicker-Day--hovered-range-start) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    // stylelint-enable max-line-length

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

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

  .#{$ns}-dark & {
    .DayPicker-Day {
      &--hovered-range {
        // same for dark theme
        // stylelint-disable max-line-length
        &:not(.DayPicker-Day--selected):not(.DayPicker-Day--selected-range):not(.DayPicker-Day--selected-range-start):not(.DayPicker-Day--selected-range-end) {
          background-color: $dark-daterangepicker-range-background-color;
        }
        // stylelint-enable max-line-length
      }

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

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

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