/*
* @component date-picker
*/

@import '../settings/date-picker';
@import '../settings/buttons';
@import '../settings/inputs';
@import '../settings/fonts';
@import '../settings/icon';
@import '../tools/mixins/flex';
@import '../tools/mixins/focus';

@include exports('cui-datepicker') {
  .#{$datepicker__class} {

    &-container {
      display: inline-flex;
    }

    &__calendar-icon {
      position: relative;
      top: 4px;
    }

    &__header {
      padding-top: $datepicker-header__padding-top;
    }

    &__navigation {
      @include flex($jc: space-between);
      padding: $datepicker-navigation__padding;
      line-height: $datepicker-navigation__line-height;

      &--current-month {
        font-family: $brand-font-bold;
      }

      &--buttons {
        > .#{$button__class}--icon {
          padding: $datepicker-navigation-buttons__padding;

          + .#{$button__class}--icon {
            margin-left: $datepicker-navigation-buttons--next__margin-left;
          }
        }
      }
    }

    &__wrapper {
      display: flex;
      flex-direction: column;
    }

    &__day--names,
    &__week {
      white-space: nowrap;
    }

    &__day--names {
      @include flex($display: flex);
      padding: $datepicker-day-names__padding;
      color: $datepicker-day-names__color;
      text-align: center;
    }

    &__day--name {
      @include flex($display: inline-flex);
      flex-grow: 1;
      width: $datepicker-day__size;
      height: $datepicker-day__size;
      margin: $datepicker-day__margin;
      font-size: $datepicker-day__font-size;
    }

    &__day {

      &.cui-button {
        @include flex($display: inline-flex);
        width: $datepicker-day__size;
        height: $datepicker-day__size;
        margin: $datepicker-day__margin;
        min-width: 0;
        min-height: 0;
        background: $datepicker-day__bg;
        font-size: $datepicker-day__font-size;
        color: $datepicker-day__color;
        cursor: pointer;
        border: 0;

        &.#{$datepicker__class}__day {

          &:hover:not(.#{$datepicker__class}__day--selected) {
            background: $datepicker-day__bg--hover;
            .#{$contrast-class} & {
              background: $datepicker-day__bg--hover--contrast;
            }
          }

          &--focus {
            @include focus-styles();
          }


          &--selected {
            color: $datepicker-day__color--selected;
            background: $datepicker-day__bg--selected;
          }

          &--outside-month {
            color: $datepicker-day__color--outside-month;
            background: $datepicker-day__bg;
          }

          &--today {
            color: $datepicker-day__color--today;
            background: $datepicker-day__bg--today;
            .#{$contrast-class} & {
              background: $datepicker-day__color--today--contrast;
            }

            &.cui-datepicker__day--selected {
              color: $datepicker-day__color--today--selected;
              background: $datepicker-day__bg--today--selected;
              .#{$contrast-class} & {
                background: $datepicker-day__bg--today--selected--contrast;
              }

            }
          }

          &:disabled {
            color: $datepicker-day__color--disabled;
            cursor: default;
            background: $datepicker-day__bg;

            &:hover {
              background: $datepicker-day__bg;
            }
          }
        }
      }
    }

    &__month {
      padding: $datepicker-month__padding;
      text-align: center;
    }
  }
}

/*
* @section default
* @component date-picker
* @html
  <div class="cui-event-overlay__children">
    <div class="cui-datepicker__month-container">
      <div class="cui-datepicker__header">
        <div class="cui-datepicker__navigation">
          <div class="cui-datepicker__navigation--current-month">November 2018</div>
          <div class="cui-datepicker__navigation--buttons">
            <button class="cui-button cui-button--36 cui-button--icon" alt="previous" type="button" aria-label="previous">
              <span class="cui-button__children"> <i class="cui-icon icon icon-arrow-left_16"></i> </span>
            </button>
            <button class="cui-button cui-button--36 cui-button--icon" alt="next" type="button" aria-label="next">
              <span class="cui-button__children"> <i class="cui-icon icon icon-arrow-right_16"></i> </span>
            </button>
          </div>
        </div>
        <div class="cui-datepicker__day--names">
          <div class="cui-datepicker__day--name">S</div>
          <div class="cui-datepicker__day--name">M</div>
          <div class="cui-datepicker__day--name">T</div>
          <div class="cui-datepicker__day--name">W</div>
          <div class="cui-datepicker__day--name">T</div>
          <div class="cui-datepicker__day--name">F</div>
          <div class="cui-datepicker__day--name">S</div>
        </div>
      </div>
      <div class="cui-datepicker__month">
        <div class="cui-datepicker__week">
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day cui-datepicker__day--outside-month" alt="28" type="button" aria-label="28" aria-selected="false">
            <span class="cui-button__children">28</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day cui-datepicker__day--outside-month" alt="29" type="button" aria-label="29" aria-selected="false">
            <span class="cui-button__children">29</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day cui-datepicker__day--outside-month" alt="30" type="button" aria-label="30" aria-selected="false">
            <span class="cui-button__children">30</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day cui-datepicker__day--outside-month" alt="31" type="button" aria-label="31" aria-selected="false">
            <span class="cui-button__children">31</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="1" type="button" aria-label="1" aria-selected="false">
            <span class="cui-button__children">1</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="2" type="button" aria-label="2" aria-selected="false">
            <span class="cui-button__children">2</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="3" type="button" aria-label="3" aria-selected="false">
            <span class="cui-button__children">3</span>
          </button>
        </div>
        <div class="cui-datepicker__week">
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="4" type="button" aria-label="4" aria-selected="false">
            <span class="cui-button__children">4</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="5" type="button" aria-label="5" aria-selected="false">
            <span class="cui-button__children">5</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="6" type="button" aria-label="6" aria-selected="false">
            <span class="cui-button__children">6</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="7" type="button" aria-label="7" aria-selected="false">
            <span class="cui-button__children">7</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="8" type="button" aria-label="8" aria-selected="false">
            <span class="cui-button__children">8</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="9" type="button" aria-label="9" aria-selected="false">
            <span class="cui-button__children">9</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="10" type="button" aria-label="10" aria-selected="false">
            <span class="cui-button__children">10</span>
          </button>
        </div>
        <div class="cui-datepicker__week">
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="11" type="button" aria-label="11" aria-selected="false">
            <span class="cui-button__children">11</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="12" type="button" aria-label="12" aria-selected="false">
            <span class="cui-button__children">12</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="13" type="button" aria-label="13" aria-selected="false">
            <span class="cui-button__children">13</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="14" type="button" aria-label="14" aria-selected="false">
            <span class="cui-button__children">14</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="15" type="button" aria-label="15" aria-selected="false">
            <span class="cui-button__children">15</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="16" type="button" aria-label="16" aria-selected="false">
            <span class="cui-button__children">16</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="17" type="button" aria-label="17" aria-selected="false">
            <span class="cui-button__children">17</span>
          </button>
        </div>
        <div class="cui-datepicker__week">
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="18" type="button" aria-label="18" aria-selected="false">
            <span class="cui-button__children">18</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="19" type="button" aria-label="19" aria-selected="false">
            <span class="cui-button__children">19</span>
          </button>
          <button
            class="cui-button cui-button--circle cui-button--28 cui-datepicker__day cui-datepicker__day--selected cui-datepicker__day--focus"
            alt="20"
            type="button"
            aria-label="20"
            aria-selected="true"
          >
            <span class="cui-button__children">20</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day cui-datepicker__day--today" alt="21" type="button" aria-label="21" aria-selected="false">
            <span class="cui-button__children">21</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="22" type="button" aria-label="22" aria-selected="false">
            <span class="cui-button__children">22</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="23" type="button" aria-label="23" aria-selected="false">
            <span class="cui-button__children">23</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="24" type="button" aria-label="24" aria-selected="false">
            <span class="cui-button__children">24</span>
          </button>
        </div>
        <div class="cui-datepicker__week">
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="25" type="button" aria-label="25" aria-selected="false">
            <span class="cui-button__children">25</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="26" type="button" aria-label="26" aria-selected="false">
            <span class="cui-button__children">26</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="27" type="button" aria-label="27" aria-selected="false">
            <span class="cui-button__children">27</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="28" type="button" aria-label="28" aria-selected="false">
            <span class="cui-button__children">28</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="29" type="button" aria-label="29" aria-selected="false">
            <span class="cui-button__children">29</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="30" type="button" aria-label="30" aria-selected="false">
            <span class="cui-button__children">30</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day cui-datepicker__day--outside-month" alt="1" type="button" aria-label="1" aria-selected="false">
            <span class="cui-button__children">1</span>
          </button>
        </div>
      </div>
    </div>
  </div>
*/