// Lightning Design System 2.12.0
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

@import '../mixins/index';

.slds-datepicker {
  /**
   * If you desire a multi-select date range, the selected cell will need to have
   * `.slds-is-selected-multi` applied to the `<td>`.
   *
   * If you are selecting multiple dates within the same week, the class `slds-has-multi-selection`
   * should be added to the `<tr>`.
   *
   * If you are selecting multiple dates spanning over two or more weeks, you will
   * need to add the class `.slds-has-multi-row-selection` to each `<tr>` that has
   * selected dates.
   *
   * @summary Class on row to notify that more than one date will be selected within the week
   *
   * @name range
   * @selector .slds-has-multi-selection
   * @restrict .slds-datepicker tr
   * @support dev-ready
   * @variant
   */
  .slds-has-multi-selection {
    // scss-lint:disable SelectorDepth
    // re-calculate for last child
    .slds-is-selected-multi:last-child > .slds-day:after {
      left: auto;
      right: 0;
      transform: translateX($spacing-xx-small);
    }
  }

  /**
   * @summary Class on row to notify that more than one date will be selected with multiple weeks
   *
   * @selector .slds-has-multi-row-selection
   * @restrict .slds-datepicker tr
   */
  .slds-has-multi-row-selection {
    // scss-lint:disable SelectorDepth
    .slds-is-selected-multi:first-child > .slds-day:before,
    .slds-is-selected-multi:last-child > .slds-day:after {
      @include calendar-selection-fill;
    }
    // re-calculate for first child
    .slds-is-selected-multi:first-child > .slds-day:before {
      left: 0;
      transform: translateX($spacing-xx-small * -1);
    }
    // re-calculate for last child
    .slds-is-selected-multi:last-child > .slds-day:after {
      left: auto;
      right: 0;
      transform: translateX($spacing-xx-small);
    }
  }

  /**
   * @summary Indicates if the selected days are apart of a date range
   *
   * @selector .slds-is-selected-multi
   * @restrict .slds-datepicker td
   */
  td.slds-is-selected-multi {

    > .slds-day {
      overflow: visible;
    }

    &.slds-is-today > .slds-day {
      box-shadow: $color-background-alt 0 0 0 1px inset;
    }

    + .slds-is-selected-multi > .slds-day:before {
      @include calendar-selection-fill;
    }
  }
}