//
// jQuery UI Datepicker
//
// http://jqueryui.com
//
// Copyright jQuery Foundation and other contributors
//
// Released under the MIT license.
//
// http://jquery.org/license
// http://api.jqueryui.com/datepicker/#theming
//
.ui-datepicker {
  background-color: $color-white;

  *:focus {
    border:  0;
    outline: 0;
  }

  a {
    // Anchors within the calendar table must not have borders.
    // scss-lint:disable ImportantRule
    border: 0 !important;
  }

  // Header
  .ui-datepicker-header {
    @include flexboxtweener((-ms-flex-align:center));
    align-items:     center;
    display:         flex;
    justify-content: space-between;
    padding:         .4em 0;
    position:        relative;
  }

  // Calendar Navigation
  .ui-datepicker-prev,
  .ui-datepicker-next {
    cursor:    pointer;
    font-size: 1.25rem;

    &::before,
    &::after {
      color: $color-font-body;
    }

    &:hover::before,
    &:hover::after {
      color: $color-primary;
    }

    &.ui-state-disabled {
      // Even for hover state.
      // scss-lint:disable ImportantRule
      opacity: .65 !important;

      &:hover {
        cursor: not-allowed !important;
      }

      &:hover::before,
      &:hover::after {
        // Must not change his color.
        // scss-lint:disable ImportantRule
        color: $color-font-body !important;
      }
    }

    span {
      @extend .screen-reader-text;
    }
  }

  .ui-datepicker-prev {
    @include icon-angle--left;
    order: 1;
  }

  .ui-datepicker-next {
    @include icon-angle--right;
    order: 3;
  }

  // Calendar Title
  .ui-datepicker-title {
    font-weight: $font-weight--bold;
    order:       2;
  }
}

.ui-datepicker table {
  border-collapse: collapse;
  width:           100%;

  tr + tr {
    border-top: 1px solid lighten($color-border, 16%);
  }

  td + td {
    border-left: 1px solid lighten($color-border, 16%);
  }

  th,
  td {
    border:     0;
    // Use padding to anchors and span.
    padding:    0;
    text-align: center;
  }

  th {
    color:       lighten($color-gray, 37%);
    font-size:   .78rem;
    font-weight: $font-weight--light;
  }

  td {
    span,
    a {
      display:         block;
      padding:         .5em .4em .4em;
      text-decoration: none;
    }
  }

  tbody {
    border: 1px solid lighten($color-border, 16%);
  }

  // States
  .ui-state-disabled {
    background-color: lighten($color-gray, 48%);
    color:            lighten(desaturate($color-gray, 1.5385), 24.7059);
  }

  .ui-state-hover,
  .ui-state-active {
    background-color: $color-primary;
    color:            $color-white;
  }
}

.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  border-bottom:    0;
  border-left:      0;
  border-right:     0;
  margin:           .7em 0 0;
  padding:          0 .2em;

  button {
    cursor:   pointer;
    float:    right;
    margin:   .5em .2em .4em;
    overflow: visible;
    padding:  .2em .6em .3em;
    width:    auto;

    &.ui-datepicker-current {
      float: left;
    }
  }
}