/*!
 * jQuery UI Datepicker 1.8.21
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Datepicker#theming
 */
.ui-datepicker { width: 17em; padding: 0; display: none; }
.ui-datepicker .ui-datepicker-header { position:relative; padding: 4px 0; border-bottom-#{direction(left)}-radius: 0; border-bottom-#{direction(right)}-radius: 0; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 5px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 4px; }
.ui-datepicker .ui-datepicker-prev { #{direction(left)}:4px; }
.ui-datepicker .ui-datepicker-next { #{direction(right)}:4px; }
.ui-datepicker .ui-datepicker-prev-hover { #{direction(left)}:3px; }
.ui-datepicker .ui-datepicker-next-hover { #{direction(right)}:3px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; #{direction(left)}: 50%; margin-#{direction(left)}: -8px; top: 50%; margin-top: -8px;  }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
.ui-datepicker td { border: 0; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: 2px; text-align: center; text-decoration: none; border-color: transparent; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-#{direction(left)}: 0; border-#{direction(right)}: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: direction(right); margin: .5em .2em .4em; cursor: pointer; padding: direction-sides(.2em .6em .3em .6em); width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: direction(left); }

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:direction(left); }
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-#{direction(left)}-width:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-#{direction(left)}-width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:direction(left); }
.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; }

.ui-datepicker{
  .ui-state-default {
    background: transparent;
    box-shadow: none;
  }
  .ui-state-active, .ui-state-active.ui-state-hover {
    border: 1px solid #a8adb3;
    color: #333;
    background: #d5dde3;
    background: linear-gradient(to bottom, #e0e6eb, #d4dce2);
    font-weight: bold;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
  }
  .ui-datepicker-time {
    @extend .ui-dialog-buttonpane;
    padding: 5px 6px;
    text-align: direction(right);

    input, select { padding: 2px; margin-bottom: 0; }
    .ui-datepicker-ok { margin-#{direction(left)}: 6px; }
  }
  .ui-datepicker-header {
    @extend .ui-dialog-titlebar;
    @include fontSize(12px);
  }
}
.ui-datepicker-today .ui-state-highlight:not(.ui-state-active){
  background: transparent;
  border-color: transparent;
  font-weight: bold;
}


#ui-datepicker-div {
  z-index: 9999;
}

.ui-datepicker-header.ui-widget-header {
  background: $ic-color-light;
  box-shadow: none;
  padding: 6px 0;
  border-color: $ic-border-light;
  text-shadow: none;
}

.ui-datepicker.ui-widget-content {
  border-color: $ic-border-light;
  box-shadow: 0 1px 2px rgba($ic-color-dark, 0.2);
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
  .ui-icon { display: none; }
  background: url("/images/icon-arrow-#{direction(left)}.svg") 50% 50% no-repeat;
  background-size: 12px;
}

.ui-datepicker .ui-datepicker-header {
  .ui-datepicker-prev, .ui-datepicker-next {
    .ui-icon { display: none; }
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 12px;
    @if $use_high_contrast == false {
      opacity: 0.85;
      &.ui-state-hover {
        border-color: $ic-border-light;
        background-color: lighten($ic-color-neutral, 5%);
      }
    }
  }

  .ui-datepicker-prev {
    background-image: url("/images/icon-arrow-#{direction(left)}.svg");
  }
  .ui-datepicker-next {
    background-image: url("/images/icon-arrow-#{direction(right)}.svg");
  }

}

.ui-datepicker td span, .ui-datepicker td a {
  border-radius: $baseBorderRadius;
  color: $ic-font-color-dark;
  &.ui-state-default.ui-state-hover {
    @if $use_high_contrast == false {
      border-color: $ic-border-light;
      background-color: lighten($ic-color-neutral, 5%);
    }
  }
  &.ui-state-default.ui-state-active {
    background: var(--ic-brand-primary);
    color: $ic-color-light;
    border-color: var(--ic-brand-primary-darkened-10);
    text-shadow: none;
  }
}

.ui-datepicker .ui-datepicker-time {
  background-color: lighten($ic-color-neutral, 5%);
  box-shadow: none;
  border-top-color: $ic-border-light;
}
