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

/**
 * @summary Initiates a datepicker component
 *
 * @name base
 * @selector .slds-datepicker
 * @restrict div
 * @support dev-ready
 * @variant
 */
.slds-datepicker {
  padding: 0;
  font-size: $font-size-2;

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

  thead > tr > th {
    padding: $spacing-x-small;
    font-weight: $font-weight-regular;
    color: var(--slds-g-color-neutral-base-30, #{$color-text-label});
  }

  tbody > tr > td {
    padding: $spacing-xx-small;
    font-size: $font-size-2;

    /**
     * @summary Style for calendar days
     *
     * @selector .slds-day
     * @restrict .slds-datepicker td span
     */
    > .slds-day {
      @include square($square-icon-medium-boundary);
      display: block;
      position: relative;
      min-width: $square-icon-medium-boundary;
      line-height: $square-icon-medium-boundary;
      border-radius: $border-radius-circle;
      margin: auto;
    }

    /**
     * @summary Indicates today
     *
     * @selector .slds-is-today
     * @restrict .slds-datepicker td
     */
    &:hover > .slds-day,
    &:focus > .slds-day,
    &.slds-is-today > .slds-day {
      cursor: pointer;
    }

    &.slds-is-today > .slds-day {
      background-color: var(--slds-g-color-neutral-base-95, #{$color-background-row-selected});
      box-shadow: 0 0 0 1px var(--slds-g-color-border-base-4);
    }

    &:focus {
      outline: 0;

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

    &:hover {

      > .slds-day {
        background-color: var(--slds-g-color-neutral-base-95, #{$color-background-row-hover});
      }
    }

    /**
     * @summary Indicates selected days
     *
     * @selector .slds-is-selected
     * @restrict .slds-datepicker td
     */
    &.slds-is-selected > .slds-day {
      background: $brand-accessible;
      color: var(--slds-g-color-neutral-base-100, #{$color-text-brand-primary});
      box-shadow: 0 0 0 1px var(--slds-g-color-brand-base-20);
    }

    &.slds-is-selected:focus > .slds-day {
      background: $brand-accessible-active;
      box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
      outline: 0;
      color: var(--slds-g-color-neutral-base-100, #{$color-text-brand-primary});
    }
  }

  .slds-datepicker__month {
    [role="gridcell"]:focus,
    [role="gridcell"].slds-has-focus {
      box-shadow: none;
    }
  }
}

/**
  * @summary Aligns filter items horizontally
  *
  * @selector .slds-datepicker__filter
  * @restrict .slds-datepicker div
  */
.slds-datepicker__filter {
  padding: $spacing-xx-small;
}

/**
  * @summary Spaces out month filter
  *
  * @selector .slds-datepicker__filter_month
  * @restrict .slds-datepicker div
  */
.slds-datepicker__filter_month,
.slds-datepicker__filter--month {
  padding: 0 $spacing-xx-small 0 0;
}

/**
  * @summary Container of the month table
  *
  * @selector .slds-datepicker__month
  * @restrict .slds-datepicker table
  */
.slds-datepicker__month {
  font-size: $font-size-2;
}

.slds-has-error .slds-datepicker__filter .slds-select {
  border: $border-width-thin solid var(--slds-g-color-border-base-4, #{$color-border-input});
  box-shadow: none;

  &:active {
    border-color: var(--slds-g-color-brand-base-60, #{$color-border-input-active});
    box-shadow: $shadow-button-focus;
  }

  &:focus {
    border-color: var(--slds-g-color-border-base-4, #{$color-border-input});
    box-shadow: var(--slds-g-shadow-outline-focus-1, #{$shadow-button-focus});
  }
}

/**
 * @summary Indicates days that are in previous/next months
 *
 * @selector .slds-day_adjacent-month
 * @restrict .slds-datepicker__month td
 */
.slds-day_adjacent-month {
  color: var(--slds-g-color-neutral-base-50, #{$datepicker-color-text-day-adjacent-month});
}

.slds-form-element__help:has(+ .slds-datepicker) {
  position: absolute;
}

.slds-table {

  .slds-datepicker {

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