/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

/**
 * Initiates a datepicker component
 */
.slds-datepicker {
  padding: 0;
  font-size: var(--slds-g-font-scale-neg-1);

  thead > tr > th,
  tbody > tr > td {
    text-align: center;
  }

  thead > tr > th {
    padding: var(--slds-g-spacing-2);
    font-weight: var(--slds-g-font-weight-4);
    color: var(--slds-g-color-on-surface-3);
    font-size: var(--slds-g-font-scale-neg-1);
  }

  tbody > tr > td {
    padding: var(--slds-g-spacing-1);
    font-size: var(--slds-g-font-scale-neg-1);
  }

  /**
    * Style for calendar days
    */
  tbody > tr > td > .slds-day {
    width: var(--slds-g-sizing-9);
    height: var(--slds-g-sizing-9);
    display: block;
    position: relative;
    min-width: var(--slds-g-sizing-9);
    line-height: 2rem;
    border-radius: var(--slds-g-radius-border-circle);
    margin: auto;
    color: var(--slds-g-color-on-surface-2);
  }

  /**
    * Style for calendar adjacent month days
    */
  tbody > tr > .slds-day_adjacent-month > .slds-day {
    color: var(--slds-g-color-on-surface-1);
  }

  tbody > tr > td:hover > .slds-day,
  tbody > tr > td:focus > .slds-day,
  tbody > tr > td.slds-is-today > .slds-day {
    cursor: pointer;
  }

  /**
    * Indicates today
    */
  tbody > tr > td.slds-is-today > .slds-day {
    background-color: var(--slds-g-color-brand-base-90);
    color: var(--slds-g-color-accent-2);
  }

  tbody > tr > td:focus {
    outline: 0;
  }

  tbody > tr > td:focus > .slds-day {
    box-shadow: var(--slds-g-shadow-inset-focus-1);
  }

  tbody > tr > td:hover > .slds-day {
    background-color: var(--slds-g-color-brand-base-90);
  }

  /**
    * Indicates selected days
    */
  tbody > tr > td.slds-is-selected > .slds-day {
    background: var(--slds-g-color-accent-container-1);
    color: var(--slds-g-color-on-accent-1);
  }

  tbody > tr > td.slds-is-selected:focus > .slds-day {
    background: var(--slds-g-color-accent-container-1);
    box-shadow: var(--slds-g-shadow-outset-focus-1);
    color: var(--slds-g-color-on-accent-1);
  }

  /**
    * 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.
    *
    * Class on row to notify that more than one date will be selected within the week
    */
  .slds-has-multi-selection .slds-is-selected-multi:last-child > .slds-day::after {
    /* RTL: physical — range connector strip paired with translateX */
    left: auto;
    right: 0;
    transform: translateX(var(--slds-g-spacing-1));
  }

  /**
    * Class on row to notify that more than one date will be selected with multiple weeks
    */
  .slds-has-multi-row-selection .slds-is-selected-multi:first-child > .slds-day::before,
  .slds-has-multi-row-selection .slds-is-selected-multi:last-child > .slds-day::after {
    content: '';
    position: absolute;
    background: var(--slds-g-color-accent-container-1);
    top: 0;

    /* RTL: physical — range connector strip paired with translateX */
    left: -50%;
    height: 100%;
    width: calc(var(--slds-g-sizing-9) + var(--slds-g-spacing-2));
    transform: translateX(calc(var(--slds-g-spacing-2) * -1));
    z-index: -1;
  }

  /* re-calculate for first child */
  .slds-has-multi-row-selection .slds-is-selected-multi:first-child > .slds-day::before {
    /* RTL: physical — range connector strip paired with translateX */
    left: 0;
    transform: translateX(calc(var(--slds-g-spacing-1) * -1));
  }

  /* re-calculate for last child */
  .slds-has-multi-row-selection .slds-is-selected-multi:last-child > .slds-day::after {
    /* RTL: physical — range connector strip paired with translateX */
    left: auto;
    right: 0;
    transform: translateX(var(--slds-g-spacing-1));
  }

  /**
    * Indicates if the selected days are apart of a date range
    */
  td.slds-is-selected-multi > .slds-day {
    overflow: visible;
  }

  td.slds-is-selected-multi.slds-is-today > .slds-day {
    box-shadow: var(--slds-g-color-border-inverse-1) 0 0 0 1px inset;
  }

  td.slds-is-selected-multi + .slds-is-selected-multi > .slds-day::before {
    content: '';
    position: absolute;
    background: var(--slds-g-color-accent-container-1);
    top: 0;

    /* RTL: physical — range connector strip paired with translateX */
    left: -50%;
    height: 100%;
    width: calc(var(--slds-g-sizing-9) + var(--slds-g-spacing-2));
    transform: translateX(calc(var(--slds-g-spacing-2) * -1));
    z-index: -1;
  }
}

/**
  * Aligns filter items horizontally
  */
.slds-datepicker__filter {
  padding: var(--slds-g-spacing-1);

  .slds-select {
    min-width: var(--slds-g-sizing-11);
  }
}

/**
  * Spaces out month filter
  */
.slds-datepicker__filter_month {
  padding: 0 var(--slds-g-spacing-1) 0 0;
  color: var(--slds-g-color-on-surface-2);
}

/**
  * Container of the month table
  */
.slds-datepicker__month {
  font-size: var(--slds-g-font-scale-neg-1);
}

.slds-has-error .slds-datepicker__filter {
  .slds-select {
    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2);
    box-shadow: none;
    color: var(--slds-s-input-color, var(--slds-g-color-on-surface-3));
    background-color: var(--slds-g-color-surface-container-1);

    &:focus-visible {
      box-shadow: var(--slds-g-shadow-outline-focus-1);
      border-color: transparent;
    }
  }
  .slds-button__icon {
    fill: currentColor;
    color: var(--slds-s-button-color, var(--slds-g-color-on-surface-1));
  }
}

/**
 * Indicates days that are in previous/next months
 */
.slds-day_adjacent-month {
  color: var(--slds-g-color-neutral-base-50);
}

/* prevent cell background-color change on row hover when nested in a data table */
.slds-table .slds-datepicker .slds-datepicker__month {
  tbody > tr:hover > td {
    background-color: unset;
  }
}

/**
 * Align datepicker icon vertically
 ** SLDS2 uses lightning-button-icon and SLDS1 does not,
 ** different styling required
 */
.slds-input-has-icon {
  lightning-button-icon.slds-input__icon {
    line-height: normal;
    width: auto;
    height: auto;
    transform: translateY(-50%);
    margin-block-start: 0;
  }
}