/*!
 * Datepicker for Bootstrap
 *
 * Copyright 2012 Stefan Petre
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 */
.ui-datepicker {

  &.modal-body{
    padding: 10px;
  }

  > .ui-datepicker-header {
    > .ui-datepicker-title {
      float: left;
      white-space: nowrap;
      > select {
        display: inline-block;
        width: auto;
        height: 23px;
      }
    }

    > a {
      @extend .button;
      height: 23px;
      padding-left: 7px;
      line-height: 14px;
      padding-right: 6px;
      display: inline-block;

      > span {
        display: none;
      }
      &:hover {
        color: inherit;
        text-decoration: none;
      }
      &.ui-datepicker-prev {
        float: left;
        &:before {
          font-family: FontAwesome;
          content: "\f053";
        }
      }

      &.ui-datepicker-next {
        float: right;
        &:before {
          font-family: FontAwesome;
          content: "\f054";
        }
      }
    }
  }

  >.ui-datepicker-calendar{
    width: 100%;
    // Undo Bootstrap .dropdown-menu; @todo: if we don't want Bootstrap styles, we should not add Bootstrap classes
    font-size: 11px;
    > tbody > tr > td {
      text-align: center;
      a {
        display: block; // fill entire cell for hover visibility

        &.ui-state-active,
        &.ui-state-highlight,
        &:focus,
        &:hover {
          color: #fff;
          text-decoration: none;
          background-color: lighten(#6FB536, 20%);
        }

        &.ui-state-active{
          background-color: #6FB536;
        }
      }
      &.ui-datepicker-week-end {
        background-color: #F0F0F0;
      }
    }
  }
}
