.datepicker {
  display: inline-block;
  vertical-align: top;
  z-index: $zindex-datepicker;
}
.datepicker-inner {
  padding-top: $datepicker-padding-top;
  font-size: $datepicker-font-size;
  color: $gray-darker;
  border: $datepicker-border;
  border-radius: $border-radius;
  background-color: $datepicker-bg;
  box-shadow: $datepicker-box-shadow;

  // datepicker内 时间选择器样式覆写
  .time-select-out {
    box-shadow: none;
  }
  .time-select {
    border: none;
  }
  .time-select-wrap-inner {
    padding: rem(7px) rem(37px);
  }
}
// 头部
.datepicker-header {
  display: flex;
  padding: $datepicker-header-padding;
  align-items: center;
  font-weight: bold;
  line-height: 1;
}

.datepicker-header-btn {
  padding: $datepicker-header-btn-padding;
  font-size: $datepicker-header-btn-font-size;
  cursor: pointer;
  transition: $datepicker-header-btn-transition;

  &:hover {
    transform: scale($datepicker-header-btn-scale);
    color: $datepicker-header-btn-hover-color;
  }
}

// 时间标题
.datepicker-caption {
  padding: $datepicker-caption-padding;
  flex: 1;
  line-height: $datepicker-caption-line-height;
  cursor: pointer;
  text-align: center;

  &:hover:not(.disable) {
    color: $datepicker-caption-hover-color;
  }
  &.disable {
    cursor: not-allowed;
  }
}

// 时间选择
.datepicker-timeselect-review {
  padding: $datepicker-timeselect-padding;
  display: flex;
  justify-content: space-between;
  .input,
  input {
    width: $datepicker-timeselect-input-width !important;
  }
}

.datepicker-body {
  padding: $datepicker-body-padding;
}

.datepicker-weekgroup,
.datepicker-daygroup {
  padding: $datepicker-daygroup-padding;
}
.datepicker-weekgroup {
  padding-top: rem(8px);
}

// 星期
.datepicker-weekgroup-item {
  display: inline-block;
  width: $datepicker-weekgroup-item-size;
  height: $datepicker-weekgroup-item-size;
  line-height: $datepicker-weekgroup-item-size;
  text-align: center;
  &.weekend {
    color: $datepicker-item-disable-color;
  }
}

// 年月日
.datepicker-item {
  display: inline-block;
  cursor: pointer;
  text-align: center;
}
.datepicker-item-text {
  position: relative;
  border: $border-width solid transparent;
  &:hover:not(.disable):not(.active) {
    background-color: $datepicker-daygroup-item-hover-color;
  }

  &.active {
    color: $datepicker-item-active-color;
    background-color: $datepicker-item-active-bg;
  }

  &.disable {
    cursor: not-allowed;
    color: $datepicker-item-disable-color !important;
    background-color: $datepicker-item-disable-bg !important;
  }

  &.notinmonth {
    color: $datepicker-daygroup-notcurrent-item-color;
  }
}

// 日
.datepicker-daygroup {
  width: $datepicker-daygroup-width;
}
.datepicker-daygroup-item {
  .datepicker-item-text {
    width: $datepicker-daygroup-item-width;
    line-height: $datepicker-daygroup-item-line-height;
    border-radius: $datepicker-item-border-radius;

    &.now:not(.active) {
      color: $datepicker-item-active-bg;
      border-color: $datepicker-item-active-bg;
    }
  }
}

// 月, 年
.datepicker-monthgroup,
.datepicker-yeargroup {
  width: $datepicker-daygroup-width;
  padding: $datepicker-yeargroup-padding;
}
.datepicker-monthgroup-item,
.datepicker-yeargroup-item {
  padding: $datepicker-yeargroup-item-padding;
  .datepicker-item-text {
    width: $datepicker-yeargroup-item-text-width;
    line-height: $datepicker-yeargroup-item-line-height;
    border-radius: $datepicker-item-border-radius;
  }
}

//底部确认按钮
.datepicker-footer {
  padding: $datepicker-footer-padding;
  line-height: 1;
  text-align: center;
  color: $text-link-primary-color;
  border-top: $datepicker-footer-border-top;
  &:hover {
    color: $text-link-hover-color;
  }
  &.datepicker-confirm {
    text-align: right;
    padding: 0;
    .btn:hover:not(:disabled) {
      background-color: inherit;
      border-color: transparent;
    }
  }
  & > span {
    cursor: pointer;
  }
}
