// 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 '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: $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:not(.slds-disabled-text) > .slds-day,
    &:focus:not(.slds-disabled-text) > .slds-day,
    &.slds-is-today > .slds-day {
      cursor: pointer;
    }

    &.slds-is-today > .slds-day {
      background-color: $color-background-row-selected;
    }

    &:focus {
      outline: 0;

      > .slds-day {
        box-shadow: $brand-accessible 0 0 0 1px inset;
      }
    }

    /**
     * @summary Indicates selected days
     *
     * @selector .slds-is-selected
     * @restrict .slds-datepicker td
     */
    &.slds-is-selected > .slds-day {
      background: $brand-accessible;
      color: $color-text-brand-primary;
    }

    &.slds-is-selected:focus > .slds-day {
      background: $brand-accessible-active;
      box-shadow: $brand-accessible-active 0 0 3px;
      color: $color-text-brand-primary;
    }
  }

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

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

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

.slds-has-error .slds-datepicker__filter .slds-select {
  border: $border-width-thin solid $color-border-input;
  box-shadow: none;
}

/**
 * @summary Indicates days that are in previous/next months
 *
 * @selector .slds-day_adjacent-month
 * @restrict .slds-datepicker__month td
 */
.slds-day_adjacent-month {
  color: $datepicker-color-text-day-adjacent-month;
}

.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;
      }
    }
  }
}