/**
 * AppBuckets UI
 *
 * Day Picker @ src/styles/elements/_day-picker.scss
 *
 * Defined at 15 ott 2020
 * Copyright Marco Cavanna • 2020
 *
 * ---
 *
 *
 */

/******
    Advanced Style for DayPicker
******/
.DayPicker {
  font-size: 1em;
  color: $text;

  // ----
  //  Remove Bottom Padding
  // ----
  .DayPicker-wrapper {
    padding-bottom: 0;
  }

  // ----
  //  Style the Header
  // ----
  .DayPicker-Caption {
    font-weight: $day-picker-header-font-weight;

    > div {
      font-size: $day-picker-header-font-size;
      font-weight: inherit;
    }
  }

  // ----
  //  Style the Table Rows
  // ----
  .DayPicker-Week {
    // ----
    //  Fix Cell Size to avoid inconsistent width/height and maintain ratio 1:1
    // ----
    .DayPicker-Day,
    .DayPicker-WeekNumber {
      padding: 0;
      height: $day-picker-day-size;
      width: $day-picker-day-size;
      vertical-align: middle;
    }

    .DayPicker-Day {
      text-align: center;

      &.DayPicker-Day--today {
        color: $day-picker-day-today-color;
        background-color: $day-picker-day-today-background-color;
      }

      &.DayPicker-Day--outside {
        color: inherit;
        opacity: $day-picker-outside-day-opacity;
      }

      &.DayPicker-Day--selected {
        color: $day-picker-selected-color;
        background-color: $day-picker-selected-background-color;
        font-weight: $day-picker-selected-font-weight;
      }
    }

    // ----
    //  Set Weekday color
    // ----
    .DayPicker-Weekday {
      color: $day-picker-day-caption-color;
    }

    // ----
    //  Fix WeekNumber width to avoid calendar resize
    // ----
    .DayPicker-WeekNumber {
      color: $day-picker-week-number-color;
      width: $day-picker-day-size + .5em;
      text-align: right;
      padding-right: .5em;
    }
  }

  // ----
  //  Set Interaction Style
  // ----
  &:not(.DayPicker--interactionDisabled) {
    .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
      /// Set background color on selectable day
      &:not(.DayPicker-Day--selected) {
        @include hover {
          &:hover {
            background-color: $day-picker-day-hover-background-color !important;
          }
        }
      }

      /// Set background color on selected day
      &.DayPicker-Day--selected {
        @include hover {
          &:hover {
            background-color: $day-picker-selected-day-hover-background-color !important;
          }
        }
      }
    }
  }
}


/******
    Style DayPicker Addons Button
******/
.DayPicker + .addons {
  text-align: center;
  margin-top: 1em;
}

.popup .DayPicker {
  margin-bottom: 1em;
}