//
// Date Picker - styles for the date picker
// --------------------------------------------------

.datepicker {
  padding: 10px;

  &.datepicker-dropdown {
    &:before {
      position: absolute;
      display: inline-block;
      content: '';
      border-top: 0;
      border-right: 7px solid transparent;
      border-bottom: 7px solid #ccc;
      border-bottom-color: rgba(0,0,0,.2);
      border-left: 7px solid transparent;
    }

    &:after {
      position: absolute;
      display: inline-block;
      content: '';
      border-top: 0;
      border-right: 6px solid transparent;
      border-bottom: 6px solid #fff;
      border-left: 6px solid transparent;
    }

    &.datepicker-orient-left {
      &:before {
        left: 6px;
      }
      &:after {
        left: 7px;
      }
    }

    &.datepicker-orient-right {
      &:before {
        right: 6px;
      }

      &:after {
        right: 7px;
      }
    }

    &.datepicker-orient-top {
      &:before {
        top: -7px;
      }

      &:after {
        top: -6px;
      }
    }

    &.datepicker-orient-bottom {
      &:before {
        bottom: -7px;
        border-top: 7px solid #999;
        border-bottom: 0;
      }
      &:after {
        bottom: -6px;
        border-top: 6px solid #fff;
        border-bottom: 0;
      }
    }
  }

  .datepicker-switch,
  .prev,
  .next {
    cursor: pointer;
  }

  table {
    background-color: transparent;

    thead {
      th.datepicker-switch {
        text-align: center;
      }

      th.next {
        text-align: right;
      }
    }

    td.active,
    td.today {
      color: @datepicker-highlight-color;
      background-color: @datepicker-highlight-bg;
    }

    td.day {
      text-align: center;
      cursor: pointer;
    }

    td.old, td.new {
      color: lighten(@text-color, 40%);
    }

    tfoot {
      display: none;
    }

    td span.month {
      padding: 2px;
      margin-left: 2px;
      cursor: pointer;

      &.active {
        font-weight: @font-weight-bold;
      }

      &:hover {
        color: @datepicker-highlight-color;
        background-color: @datepicker-highlight-bg;
      }

      &:first-child {
        margin-left: 0;
      }
    }

    td span.year {
      padding: 2px;
      margin-left: 4px;
      cursor: pointer;

      &.active {
        font-weight: @font-weight-bold;
      }

      &:hover {
        color: @datepicker-highlight-color;
        background-color: @datepicker-highlight-bg;
        border-radius: @border-radius-small;
      }

      &:first-child {
        margin-left: 0;
      }
    }
  }
}
