@charset "utf-8";
@include ns(date-picker-input) {display: inline-block; position: relative;
  &.date-picker-clear {
    // 输入框有值时鼠标经过隐藏日期icon
    &:hover {
      .icon-date {display: none}
    }
  }
  .icon-date {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 20px; cursor: pointer;
    &:before {display: inline-block;}
  }
}
@include ns(date-picker) { position: absolute; background: #fff; border: 1px solid #d9d9d9; box-shadow: 0 1px 6px #ddd; z-index: 999; padding: 5px; overflow: hidden; animation: slideDown .3s; transform-origin: center top;box-sizing: border-box;
  .calendar { float: left; display: block; user-select: none;width: 250px;
    &:nth-child(2) { margin-left: 10px; }
  }
  .calendar-head {height: 34px;line-height: 34px; text-align: center; position: relative;
    a { cursor: pointer; position: absolute; padding: 0 5px; font-weight: 700; font-size: 12px; }
    .calendar-prev-year { left: 5px; }
    .calendar-prev-month { left: 25px; }
    .calendar-year-select, .calendar-year-month { position: relative; padding: 0; }
    .calendar-next-year { right: 5px; }
    .calendar-next-month { right: 25px; }
  }
  .calendar-body { text-align: center; position: relative;
    .calendar-days {
      a { float: left; width: 14.28%; height: 25px;line-height: 25px; display: block; font-size: 12px; color: #333; box-sizing: border-box; cursor: pointer; position: relative;
        &:hover { background: #eaf8fe; }
        span { position: absolute; font-size: 10px; right: -3px; top: -6px;color: #2d8cf0;z-index: 2 }
      }
      /*非当前月*/
      .calendar-date-out { color: #999; }
      .calendar-date-disabled { color: #ccc; cursor: not-allowed !important;
        &:hover { background: none }
      }
      /*当前选中*/
      .calendar-date-select { color: #f60; }
      /*今天的*/
      .calendar-date-today { text-decoration: underline }
    }
    .calendar-week {
      a { cursor: default;
        &:hover { background: none; }
      }
    }
    .calendar-months, .calendar-year {background: #fff; overflow: hidden;z-index: 10;
      a { float: left; width: 33.33%; height: 44px;line-height: 44px; display: block; color: #333; cursor: pointer;
        &:hover { background: #eaf8fe; }
        &.calendar-date-disabled { background: #ccc; cursor: not-allowed }
        &.calendar-date-old { background: #eaf8fe; }
        &.calendar-date-select { background: #1284e7; color: #fff; font-weight: 700; }
      }
    }
    .calendar-time {height: 22px;line-height: 22px; position: relative; text-align: left;
      .calendar-time-input { border: 1px solid #d9d9d9; width: 80px;}
      input { width: 20px; text-align: center; border: 0; font-size: 12px;outline: none }
      .btn-time { right: 10px; top: 0; position: absolute; cursor: pointer; }
    }
  }
  &.date-picker-range {
    //双日历
    .calendar-year, .calendar-months { width: 202% !important; z-index: 5 }
    .btn-time { clear: both; text-align: right; margin-right: 10px; cursor: pointer;
      &:hover { color: #f60; }
    }
  }
  .clearfix {
    &:after {display: block; content: '.'; clear: both; height: 0; line-height: 0; visibility: hidden;}
  }
}
