$gfs-date-select-height: 24px;

.ui-datepicker {
  background: #fefefe;
  border: 1px solid $gfs-border-color;
  border-radius: $gfs-border-radius;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.45);

  .ui-datepicker-header {
    background-color: #f7f7f7;
    border-bottom: 1px solid $gfs-border-color;
    padding: 10px;
  }

  .ui-datepicker-title {
    text-align: center;
  }

  .ui-datepicker-month,
  .ui-datepicker-year {
    display: inline-block;
    width: 75px;
  }

  .ui-datepicker-prev {
    float: left;
  }

  .ui-datepicker-next {
    float: right;
  }

  .ui-icon {
    @extend %gf-basic-icon;
  }

  .ui-icon-circle-triangle-w {
    @extend %gf-icon-chevron-left;
  }

  .ui-icon-circle-triangle-e {
    @extend %gf-icon-chevron-right;
  }

  select {
    background-color: #fff;
    background-position: right ($gfs-date-select-height - $gfs-icon-size)/2 top ($gfs-date-select-height - $gfs-icon-size)/2, 0 0;
    height: $gfs-date-select-height;
    padding: 0 $gfs-field-padding-x;
  }

  .ui-datepicker-month {
    margin-right: 7px;
  }

  .ui-datepicker-calendar {
    margin: 10px;

    th {
      padding: 7px;
    }

    td a {
      display: block;
      padding: 7px;

      &:hover {
        background-color: #f9f9f9;
      }
    }
  }
}