.datepicker {
  top: 0;
  left: 0;
  padding: 4px;
  margin-top: 1px;
  border-radius: $border-radius-base;

  >div {
    display: none;
  }
  .datepicker-days,
  .datepicker-months,
  .datepicker-years {
    display: block;
  }

  table{
    width: 100%;
    margin: 0;
  }
  td,
  th {
    text-align: center;
    @include square(20px);
    border-radius: $border-radius-base;
  }
  td {
    &.day:hover {
      background: $gray-lighter;
      cursor: pointer;
    }
    &.old,
    &.new {
      color: $gray-light;
    }
    &.today {
      font-weight: bold;
    }
    &.active,
    &.active:hover {
      color: #fff;
      text-shadow: 0 -1px 0 rgba(0,0,0,.25);
    }
    span {
      display: block;
      width: 54px;
      height: 54px;
      line-height: 54px;
      float: left;
      margin: 2px;
      cursor: pointer;
      border-radius: $border-radius-base;
      &:hover {
        background: $gray-lighter;
      }
      &.active {
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0,0,0,.25);
      }
      &.old {
        color: $gray-light;
      }
    }
  }

  th.switch {
    width: 145px;
  }

  thead tr:first-child th {
    cursor: pointer;
    &:hover {
      background: $gray-lighter;
    }
  }
}

.datepicker td.active,.datepicker td.active:hover, .datepicker span.active {
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}

.input-append,
.input-prepend {
  &.date {
    .add-on i {
      display: block;
      cursor: pointer;
      @include square(16px);
    }
  }
}