.datepicker {
  display: inline-block;
  vertical-align: top;
  z-index: $zindex-datepicker;
}
.datepicker-inner {
  padding-top: $datepicker-padding-top;
  font-size: $datepicker-font-size;
  transform-origin: center 0;
  animation: 0.36s scaleIn ease;
  color: $gray-base;
  border: $datepicker-border;
  border-radius: $border-radius;
  background-color: $datepicker-bg;
  box-shadow: $datepicker-box-shadow;
}
// 头部
.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-body {
  padding: $datepicker-body-padding;
}

// 星期
.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) {
    color: $datepicker-item-active-bg;
    border-color: $datepicker-item-active-bg;
  }

  &.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;
  }
}

// 日
.datepicker-daygroup {
  width: $datepicker-daygroup-width;
}
.datepicker-daygroup-item {
  padding: rem(2px);
  .datepicker-item-text {
    width: $datepicker-daygroup-item-width;
    line-height: $datepicker-daygroup-item-line-height;
    border-radius: $datepicker-daygroup-item-border-radius;

    &.now::before {
      position: absolute;
      bottom: $datepicker-item-dot-bottom;
      left: 50%;
      width: $datepicker-item-dot-size;
      height: $datepicker-item-dot-size;
      content: '';
      transform: translateX(-50%);
      border-radius: 50%;
      background-color: $brand-primary;
    }
  }
}

// 月
.datepicker-monthgroup {
  width: $datepicker-monthgroup-width;
}
.datepicker-monthgroup-item {
  padding: $datepicker-monthgroup-item-padding;
  &:nth-child(3n-1) {
    padding-right: rem(12px);
    padding-left: rem(12px);
  }
  .datepicker-item-text {
    width: $datepicker-monthgroup-item-text-width;
    line-height: $datepicker-monthgroup-item-line-height;
    border-radius: $datepicker-monthgroup-item-border-radius;
  }
}

// 年
.datepicker-yeargroup {
  width: $datepicker-daygroup-width;
  padding-bottom: rem(10px);
}
.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-yeargroup-item-border-radius;
  }
}

//底部
.datepicker-footer {
  padding: $datepicker-footer-padding;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  color: $link-color;
  border-top: $datepicker-border;
  &:hover {
    color: $link-hover-color;
  }
}