$date-picker-prefix-cls: "#{$css-prefix}date-picker";
$picker-prefix-cls: "#{$css-prefix}picker";

$date-picker-cells-width: 196px;
$date-picker-cells-width-with-weeknumbers: 226px;

.#{$date-picker-prefix-cls} {
  height: $input-height-base;
  position: relative;
  // display: inline-block;
  line-height: normal;
  width: 100%;
  display: inline-block;
  vertical-align: middle;

  &-rel {
    position: relative;
  }
  .#{$select-dropdown-prefix-cls} {
    width: auto;
    padding: 0;
    overflow: visible;
    max-height: none;
  }

  &-cells:not(&-cells-month-selection) {
    span {
      width: $date-picker-cell-span-width;
      height: $date-picker-cell-span-height;
    }
    span.#{$date-picker-prefix-cls}-cells-cell {
      width: $date-picker-cells-cell-span-width;
      height: $date-picker-cells-cell-span-height;
    }
    span.#{$date-picker-prefix-cls}-cells-cell-design {
      color: $primary-color;
    }
  }

  &-cells {
    width: $date-picker-cells-width;
    margin: $date-picker-cell-margin;
    white-space: normal;

    span {
      display: inline-block;

      em {
        display: inline-block;
        width: $date-picker-cell-span-width;
        height: $date-picker-cell-span-height;
        line-height: $date-picker-cell-span-height;
        margin: $date-picker-cell-span-margin;
        font-style: normal;
        border-radius: 2px;  //***************//
        text-align: center;
        transition: all $transition-time $ease-in-out;
      }
    }

    &-header span {
      line-height: $date-picker-cells-header-span-line-height;
      text-align: center;
      margin: $date-picker-cells-header-span-margin;
      color: $datepicker-cells-header-color;
    }
    span.#{$date-picker-prefix-cls}-cells-cell {
      cursor: pointer;
    }

    &-cell {
      &:hover {
        em {
          background: $date-picker-cell-hover-bg;
        }
      }
    }

    &-cell-prev-month,
    &-cell-next-month {
      em {
        color: $datepicker-cells-prev-month-color;
      }
      // &:hover{
      //   em{
      //     background: transparent;
      //   }
      // }
    }

    &-cell-today {
      em {
        position: relative;

        &::after {
          content: "";
          display: block;
          width: $date-picker-cells-cell-today-width;
          height: $date-picker-cells-cell-today-height;
          border-radius: 50%;
          background: $primary-color;
          position: absolute;
          top: $date-picker-cells-cell-today-top;
          right: $date-picker-cells-cell-today-right;
        }
      }
    }

    &-cell-range {
      position: relative;

      em {
        position: relative;
        z-index: 1;
      }

      &::before {
        content: "";
        display: block;
        background: $date-picker-cell-hover-bg;
        border-radius: 0;
        border: 0;
        position: absolute;
        top: $date-picker-cell-range-before-top;
        bottom: $date-picker-cell-range-before-bottom;
        left: 0;
        right: 0;
      }
    }

    &-cell-selected,
    &-cell-selected:hover {
      em {
        background: $primary-color;
        color: $date-picker-cell-selected-hover-color;
      }
    }
    span.#{$date-picker-prefix-cls}-cells-cell-disabled.#{$date-picker-prefix-cls}-cells-cell-selected {
      background: #fff;

      em {
        background: #f7f7f7; /*****************   */
        color: #bbb; /*****************   */
        border: 1px solid #d9d9d9; /*****************   */
        &:hover {
          background: #f7f7f7; /*****************   */
          color: #bbb; /*****************   */
        }
      }
    }
    &-today.#{$date-picker-prefix-cls}-cells-cell-selected {
      em {
        &::after {
          background: $date-picker-cell-selected-hover-color;
        }
      }
    }
  }

  &-with-range {
    & .h-date-picker-cells-month-selection {
      display: block;
    }
  }

  span.#{$date-picker-prefix-cls}-cells-cell-week-label,
  span.#{$date-picker-prefix-cls}-cells-cell-week-label:hover,
  span.h-date-picker-cells-cell-disabled,
  span.h-date-picker-cells-cell-disabled:hover {
    cursor: $cursor-disabled;
    color: $btn-disable-color;
    position: relative;

    em {
      position: relative;
      color: #bbb;/*****************   */
      background: transparent;/*****************   */
    }

    &::before {
      content: "";/*****************   */
      display: block;/*****************   */
      background: #f7f7f7;/*****************   */
      position: absolute;/*****************   */
      top: $date-picker-cell-range-before-top;/*****************   */
      bottom: $date-picker-cell-range-before-bottom;/*****************   */
      left: 0;/*****************   */
      right: 0;/*****************   */
    }
  }

  span.h-date-picker-cells-cell-start,
  span.h-date-picker-cells-cell-end {
    position: relative;/*****************   */

    em {
      border-radius: 2px;/*****************   */
      position: relative; /*****************   */
    }

    &::before {
      border-radius: 2px;
      left: 2px;/*****************   */
      right: 2px;/*****************   */
    }
  }
  .#{$date-picker-prefix-cls}-cells-cell-start.#{$date-picker-prefix-cls}-cells-cell-end {
    position: relative;

    em {
      background: $primary-color;
      color: #fff;/*****************   *//*****************   */
    }

    &::before {
      left: 0;
      right: 0;/*****************   *//*****************   */
    }/*****************   */
  }

  span.h-date-picker-cells-cell-disabled,
  span.h-date-picker-cells-cell-disabled:hover {
    background: #fff;
  }

  &-cells-year,
  &-cells-month:not(&-cells-month-selection) {
    span {
      height: 28px;
      margin: 10px 16px 10px 8px;//fix 年份数字显示不居中
    }
  }

  &-cells-year,
  &-cells-month {
    margin: 0;//px //***************************
    width: 216px;//***************************
    padding: 0 10px;//***************************
    display: flex;//***************************
    justify-content: space-between;//***************************
    flex-wrap: wrap;//***************************
    span {
      em {
        width: 38px;//***************************
        margin-left: 0;//***************************
      }
    }
  }

  &-header {
    border-bottom: 1px solid #ededed;//***************************
  }
}