// Lightning Design System 2.29.1
// 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

    .slds-is-selected-multi > .slds-day{
      box-shadow: none;
    }
    // re-calculate for last child
    .slds-is-selected-multi:last-child > .slds-day:after {
      left: auto;
      right: 0;
      transform: translateX($spacing-xx-small);
    }

    :nth-child(1 of .slds-is-selected-multi) > .slds-day::before {
      @include calendar-selection-outline;
    }

    :nth-last-child(1 of .slds-is-selected-multi) > .slds-day::after {
      @include calendar-selection-outline;
      transform: rotate(-180deg);
    }
  }

  /**
   * @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 > .slds-day{
      box-shadow: none;
    }

    .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);
      z-index: -2;
    }

    &:nth-child(1 of .slds-has-multi-row-selection) {
      :nth-child(1 of .slds-is-selected-multi) > .slds-day::before {
        @include calendar-selection-outline;
      }
      .slds-is-selected-multi:first-child > .slds-day:before {
        left: 2px;
      }

      // To handle the scenario where the date is both first & last
      :nth-last-child(1 of .slds-is-selected-multi) > .slds-day::after {
        width: $square-icon-utility-medium;
      }
    }

    &:nth-last-child(1 of .slds-has-multi-row-selection) {
      :nth-last-child(1 of .slds-is-selected-multi) > .slds-day::after {
        @include calendar-selection-outline;
      }

      // To handle the scenario where the date is both first & last
      :nth-child(1 of .slds-is-selected-multi) > .slds-day::before {
        width: $square-icon-utility-medium;
      }
    }
  }

  /**
   * @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: var(--slds-g-color-neutral-base-100, #{$color-background-alt}) 0 0 0 1px inset;
    }

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