// ============================================================================
// :: SLDS Calendar
// ============================================================================
/**
 * Scope with overwrites for the calendar/date-picker in the Salesforce
 * Lightning Design System.
 */

// ============================================================================
// :: Root
// ============================================================================
// .s-slds-calendar {}

// ============================================================================
// :: Elements
// ============================================================================

/**
 * In general, the SLDS styling causes all the rem values to be too small. So we
 * need to reassign all sizes & padding.
 */

.s-slds-calendar h2 {
  font-size: $font-size-base;
}

.s-slds-calendar .slds-datepicker {
  font-size: $font-size-base;
}

.s-slds-calendar .slds-datepicker td {
  font-size: $font-size-base;
}

// Increase day containers

.s-slds-calendar .slds-datepicker td>.slds-day {
  width: auto;
  height: auto;
  padding: 1rem;
}

// Add hover to days

.s-slds-calendar .slds-datepicker td:not(.slds-disabled-text)>.slds-day {
  transition: background-color 0.2s ease-in;

  &:hover {
    background-color: $background-color-base;
  }
}

// Styling the calendar container

.s-slds-calendar .slds-dropdown {
  max-width: 100rem;

  padding: 1.5rem;

  border: none;
  border-radius: $border-radius-base;
  box-shadow: $box-shadow-base;

  text-align: center;
}

// Make their buttons look like our buttons

.s-slds-calendar .slds-button {
  @extend %__button;

  &.slds-button_icon-bare {
    background-color: transparent;
  }
}

// Make their TH look like our H4

.s-slds-calendar .slds-datepicker th {
  @extend %__h5-default;
}

// Select styling

.s-slds-calendar .slds-select {
  padding: 1rem 3rem 1rem 1.5rem;
  height: auto;

  border-radius: $border-radius-base;
}

// Arrows in select styling

.s-slds-calendar .slds-select_container:before {
  top: calc((4rem / 2) - 7px);
}

.s-slds-calendar .slds-select_container:after {
  top: calc((4rem / 2) + 3px);
}


.s-slds-calendar .slds-select_container:before,
.s-slds-calendar .slds-select_container:after {
  right: 1rem;

  opacity: 0.2;

  transition: opacity 0.2s ease-in;
}

.s-slds-calendar .slds-select_container:hover {

  &::before,
  &::after {
    opacity: 1;
  }
}

// Current day

.s-slds-calendar .slds-datepicker td.slds-is-today > .slds-day {
  background-color: $primary-color-base;
  color: $text-color-white;
}

// They use Abbr tags for the days, hide default styling

.s-slds-calendar .slds-datepicker th abbr {
  text-decoration: none;
}


// The only way to select the previous & next month buttons
.s-slds-calendar .slds-datepicker__filter_month {

  *:first-child,
  *:last-child {
    .slds-button {
      @extend %__button--ghost;

      width: auto;
      height: auto;

      color: $text-color-base;

      // remove their weird focus
      &:focus {
        box-shadow: none;
      }

      // hide their icon
      svg {
        display: none;
      }
    }
  }

  // previous month button
  *:first-child .slds-button {
    @extend %__icon-arrow-left;
  }

  // next month button
  *:last-child .slds-button {
    @extend %__icon-arrow-right;

    text-align: right;
  }
}