////////////////////
// jQuery UI Overrides
////////////////////

.ui-widget
  font-family: $font-family !important
  font-size: $font-size  !important
  .ui-widget
    font-size: $font-size  !important
  input, select, textarea, button
    font-family: $font-family  !important
    font-size: $font-size  !important

.ui-widget-content
  border: $border-width solid $border-color !important
  background: white !important
  color: $color-primary  !important
  a
    color: $color-accent !important

.ui-widget-header
  border: none !important
    radius: 0 !important
  background: $color-accent !important
  color: $color-inverted !important
  font-weight: normal !important
  a
    color: $color-accent !important

// Interaction states

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
  border: none !important
  background: white !important
  font-weight: normal !important
  color: $color-primary  !important

.ui-state-default a
  color: $color-accent !important
  text-decoration: none !important
  &:link, &:visited
    color: $color-accent !important
    text-decoration: none !important

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus
  border: none !important
  background: lighten($color-accent, 27%) !important
  font-weight: normal !important
  color: $color-primary !important

.ui-state-hover a, .ui-state-focus a, .ui-state-active a
  color: $color-accent !important
  text-decoration: none !important
  &:hover, &:link, &:visited
    color: darken($color-accent, 10%) !important
    text-decoration: none !important

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active
  border: none !important
  background: $color-accent !important
  font-weight: normal !important
  color: $color-primary !important

// Interaction Cues

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight
  border: none !important
  background: lighten($color-accent, 27%) !important
  color: $color-primary !important

//.ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a
  color: #363636

//.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error
  border: 1px solid #cd0a0a
  background: #fef1ec url(/assets/jquery-ui/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x
  color: #cd0a0a

//.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a, .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text
  color: #cd0a0a

//.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary
  font-weight: bold

//.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary
  opacity: .7
  filter: Alpha(Opacity = 70)
  font-weight: normal

//.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled
  opacity: .35
  filter: Alpha(Opacity = 35)
  background-image: none

//.ui-state-disabled .ui-icon
  filter: Alpha(Opacity = 35)

.ui-datepicker
  width: 17em
  padding: .2em .2em 0
  display: none
  .ui-datepicker-header
    position: relative
    padding: .2em 0
  .ui-datepicker-prev, .ui-datepicker-next
    position: absolute
    top: 2px
    width: 1.8em
    height: 1.8em
  .ui-datepicker-prev-hover, .ui-datepicker-next-hover
    top: 1px
  .ui-datepicker-prev
    left: 2px
  .ui-datepicker-next
    right: 2px
  .ui-datepicker-prev-hover
    left: 1px
  .ui-datepicker-next-hover
    right: 1px
  .ui-datepicker-prev span, .ui-datepicker-next span
    display: block
    position: absolute
    left: 50%
    margin-left: -8px
    top: 50%
    margin-top: -8px
  .ui-datepicker-title
    margin: 0 2.3em
    line-height: 1.8em
    text-align: center
    select
      font-size: 1em
      margin: 1px 0
  select
    &.ui-datepicker-month, &.ui-datepicker-year
      width: 45%
  table
    width: 100%
    font-size: .9em
    border-collapse: collapse
    margin: 0 0 .4em
  thead
    tr
      background: $color-accent !important
  th
    padding: .7em .3em
    text-align: center
    font-weight: bold
    border: 0
  tr
    background: none !important
  td
    border: $border-width solid $border-color !important
    padding: 0 !important
    span, a
      display: block
      padding: .2em
      text-align: right
      text-decoration: none
  .ui-datepicker-buttonpane
    background-image: none
    margin: .7em 0 0 0
    padding: 0 .2em
    border-left: 0
    border-right: 0
    border-bottom: 0
    button
      float: right
      margin: .5em .2em .4em
      cursor: pointer
      padding: .2em .6em .3em .6em
      width: auto
      overflow: visible
      &.ui-datepicker-current
        float: left
  &.ui-datepicker-multi
    width: auto