// @import '../_utils.scss';

// @import './icon.scss';
// @import './input.scss';
// @import './button.scss';
// @import './select-dropdown.scss';

.#{$date-picker-prefix-cls} {
  @if $--size-switch == no {
    height: $input-height-base;
  }
  position: relative;
  // display: inline-block;
  width: 100%;
  display: inline-block;
  vertical-align: middle;
  &.#{$date-picker-prefix-cls}-small {
    @if $--size-switch == no {
      height: $input-height-small;
    }

    .#{$input-prefix-cls}-type {
      @if $--size-switch == no {
        height: $input-height-small;
      }
    }
  }
  &.#{$date-picker-prefix-cls}-large {
    @if $--size-switch == no {
      height: $input-height-large;
    }

    .#{$input-prefix-cls}-type {
      @if $--size-switch == no {
        height: $input-height-large;
      }
    }
  }

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

    @include scrollbar;
  }

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

      @include theme-font-color($__date-picker-cell-design_font-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: $btn-border-radius-small;
        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;

      @include theme-font-color($__date-picker-cell-header_font-color);
    }
    span.#{$date-picker-prefix-cls}-cells-cell {
      cursor: pointer;
    }

    &-cell {
      @include theme-font-color($__date-picker-cell_font-color);

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

          @include theme-background-color($__date-picker-cell_hover_background-color);
        }
      }
    }

    &-cell-prev-month,
    &-cell-next-month {
      em {
        color: $datepicker-cells-prev-month-color;

        @include theme-font-color($__date-picker-cell-prev-next_font-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;

          @include theme-background-color($__date-picker-cell-today-after_background-color);
        }
      }
    }

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

        @include theme-background-color($__date-picker-cell-range-before_background-color);
      }
    }

    &-cell-selected,
    &-cell-selected:hover {
      em {
        background: $primary-color;
        color: $date-picker-cell-selected-hover-color;

        @include theme-background-color($__date-picker-cell_selected_background-color);
        @include theme-font-color($__date-picker-cell_selected_font-color);
      }
    }
    span.#{$date-picker-prefix-cls}-cells-cell-disabled.#{$date-picker-prefix-cls}-cells-cell-selected {
      em {
        background: $btn-disable-color;
        color: $btn-disable-bg;

        @include theme-background-color($__date-picker-cell_disabled_background-color);
        @include theme-font-color($__date-picker-cell_disabled_font-color);
      }
    }
    &-today.#{$date-picker-prefix-cls}-cells-cell-selected {
      em {
        &::after {
          background: $date-picker-cell-selected-hover-color;

          @include theme-background-color($__date-picker-cell-today-after_selected_background-color);
        }
      }
    }

    // DatePicker 设置transfer 由于 下拉框样式脱离了组件，导致这部分样式代码找不，故上移到cells里
    span.#{$date-picker-prefix-cls}-cells-cell-week-label,
    span.#{$date-picker-prefix-cls}-cells-cell-week-label:hover,
    span.#{$date-picker-prefix-cls}-cells-cell-disabled,
    span.#{$date-picker-prefix-cls}-cells-cell-disabled:hover {
      cursor: $cursor-disabled;
      color: $btn-disable-color;

      @include theme-font-color($__date-picker-cell_disabled_font-color);

      em {
        color: inherit;
        background: inherit;
      }
    }

    span.#{$date-picker-prefix-cls}-cells-cell-disabled,
    span.#{$date-picker-prefix-cls}-cells-cell-disabled:hover {
      background: $btn-disable-bg;

      @include theme-background-color($__date-picker-cell_disabled_background-color);
    }
  }

  &-cells-show-week-numbers {
    width: $date-picker-cells-width-with-weeknumbers;
  }

  &-cells-year,
  &-cells-month:not(&-cells-month-selection) {
    span {
      width: 40px;
      height: 28px;
      margin: 10px 12px;
    }
  }

  &-cells-month-selection {
    span {
      padding: 10px 12px;
    }
  }

  &-cells-year,
  &-cells-month {
    margin-top: $date-picker-cells-year-margin-top;
    // padding-left: 11px;
    span {
      // @if $--size-switch == yes {
      //   line-height: $--size-height-base;
      // } @else {
        line-height: $date-picker-cells-year-span-height;
      // }
      border-radius: $btn-border-radius-small;

      em {
        // @if $--size-switch == yes {
        //   @include computed-square($--size-height-base, $--size-font-size-base, 0);
        // } @else {
          height: $date-picker-cells-year-span-height;
          line-height: $date-picker-cells-year-span-height;
        // }
        width: $date-picker-cells-year-span-width;
        margin: 0;
      }
    }
  }

  &-header {

    // @if $--size-switch == yes {
    //   height: $--size-height-base + 4;
    //   line-height: $--size-height-base + 4;
    // } @else {
      height: $date-picker-header-height;
      line-height: $date-picker-header-height;
    // }

    text-align: center;
    border-bottom: 1px solid $date-picker-boder-color;

    @include theme-border-color($__date-picker-header_border-color);

    &-label {
      cursor: pointer;
      transition: color $transition-time $ease-in-out;

      @include theme-font-color($__date-picker-header-label_font-color);

      &:hover {
        color: $primary-color;

        @include theme-font-color($__date-picker-header-label_hover_font-color);
      }
    }
  }

  &-prev-btn {
    float: left;

    &-arrow-double {
      margin-left: 12px;

      i::after {
        // margin-left: -8px;
        // content: "\e733";
      }
    }
  }

  &-next-btn {
    float: right;

    &-arrow-double {
      margin-right: 10px;

      i::after {
        // margin-left: -8px;
        // content: "\e704";
      }
    }
  }

  &-with-range {
    .#{$picker-prefix-cls}-panel {
      &-body {
        min-width: ($date-picker-cells-width + 20) * 2;
      }

      &-content {
        float: left;
      }
    }
    .#{$picker-prefix-cls}-cells-show-week-numbers {
      min-width: ($date-picker-cells-width-with-weeknumbers + 20) * 2;
    }
  }

  &-with-week-numbers {
    .#{$picker-prefix-cls}-panel {
      &-body {
        min-width: ($date-picker-cells-width-with-weeknumbers + 20) * 2;
      }
    }
  }

  &-dropdown-transfer {
    z-index: $zindex-transfer;
    span.#{$date-picker-prefix-cls}-cells-cell-disabled,
    span.#{$date-picker-prefix-cls}-cells-cell-disabled:hover {
      cursor: $cursor-disabled;
      background: $btn-disable-bg;
      color: $btn-disable-color;

      @include theme-background-color($__date-picker-dropdown-transfer_disabled_background-color);
      @include theme-font-color($__date-picker-dropdown-transfer_disabled_font-color);

      em {
        color: inherit;
        background: inherit;
      }
    }
  }

  // &-transfer {
  //   z-index: $zindex-transfer;
  //   max-height: none;
  //   width: auto;

    // span.#{$date-picker-prefix-cls}-cells-cell-disabled,
    // span.#{$date-picker-prefix-cls}-cells-cell-disabled:hover{
    //     cursor: $cursor-disabled;
    //     background: $btn-disable-bg;
    //     color: $btn-disable-color;
    //     em{
    //         color: inherit;
    //         background: inherit;
    //     }
    // }
  // }
}
.#{$picker-prefix-cls} {
  &-panel {
    &-icon-btn {
      display: inline-block;
      width: $date-picker-panel-width;

      // @if $--size-switch == yes {
      //   line-height: $--size-height-base + 4;
      // } @else {
        height: $date-picker-panel-height;
        line-height: $date-picker-panel-line-height;
        margin-top: $date-picker-panel-margin-top;
      // }

      text-align: center;
      cursor: pointer;
      color: $icon-color;
      transition: color $transition-time $ease-in-out;

      @include theme-font-color($__picker-panel-icon_font-color);

      &:hover {
        color: $primary-color;

        @include theme-font-color($__picker-panel-icon_hover_font-color);
      }

      i {
        font-size: $font-size-base;
      }
    }

    &-with-sidebar {
      padding-left: $date-picker-sidebar-width;
    }

    &-with-sidebar-right {
      padding-right: $date-picker-sidebar-width;
    }

    &-sidebar {
      width: $date-picker-sidebar-width;
      // float: left;
      margin-left: -$date-picker-sidebar-width;
      position: absolute;
      top: 0;
      bottom: 0;
      background: $date-picker-sidebar-bg;
      border-right: 1px solid $date-picker-boder-color;
      border-radius: $border-radius-small 0 0 $border-radius-small;
      overflow: auto;

      @include theme-background-color($__picker-panel-sidebar_background-color);
      @include theme-border-color($__picker-panel-sidebar_border-color);
      @include scrollbar;

      &-right {
        border-left: 1px solid $date-picker-boder-color;
        border-right: none;
        right: 0;
      }
    }

    &-shortcut {

      // @if $--size-switch == yes {
      //   @include computed-height($--size-height-base, $--size-font-size-base, 0);
      // } @else {
        height: $date-picker-panel-shortcut-height;
        line-height: 1.5;
        padding: $btn-padding-large;
      // }

      transition: all $transition-time $ease-in-out;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      @include theme-font-color($__picker-panel-shortcut_font-color);

      &:hover {
        background: $date-picker-panel-shortcut-hover-bg;

        @include theme-background-color($__picker-panel-shortcut_hover_background-color);
      }
    }

    &-body {
      float: left;
    }
  }

  &-confirm {
    border-top: $date-picker-confirm-border-top;
    text-align: right;

    // @if $--size-switch == yes {
    //   padding: $--size-offset-base;
    // } @else {
      padding: 8px;
    // }

    clear: both;

    @include theme-border-color($__picker-confirm_border-color);

    & > span {
      color: $link-color;
      cursor: pointer;
      user-select: none;
      float: left;
      padding: 2px 0;
      transition: all $transition-time $ease-in-out;

      @include theme-font-color($__picker-confirm_font-color);

      &:hover {
        color: $link-hover-color;

        @include theme-font-color($__picker-confirm_hover_font-color);
      }

      &:active {
        color: $link-active-color;

        @include theme-font-color($__picker-confirm_active_font-color);
      }
    }
    & > span.#{$date-picker-prefix-cls}-time-disabled {
      color: $btn-disable-color;
      cursor: $cursor-disabled;

      @include theme-font-color($__picker-confirm_disabled_font-color);
    }
  }
}
.#{$date-picker-prefix-cls}-cells-cell-end.#{$date-picker-prefix-cls}-cells-cell-left {
  em {
    background: $date-picker-cell-hover-bg;
    color: $text-color;

    @include theme-font-color($__date-picker-cell-end-left_font-color);
    @include theme-background-color($__date-picker-cell-end-left_background-color);
  }
}
.#{$date-picker-prefix-cls}-cells-cell-start.#{$date-picker-prefix-cls}-cells-cell-right {
  em {
    background: $date-picker-cell-hover-bg;
    color: $text-color;

    @include theme-font-color($__date-picker-cell-start-right_font-color);
    @include theme-background-color($__date-picker-cell-start-right_background-color);
  }
}
.#{$date-picker-prefix-cls}-cells-cell-start.#{$date-picker-prefix-cls}-cells-cell-end {
  em {
    background: $primary-color;
    color: #fff;

    @include theme-font-color($__date-picker-cell-start-end_font-color);
    @include theme-background-color($__date-picker-cell-start-end_background-color);
  }
}

.#{$time-picker-prefix-cls} {
  &-cells {
    min-width: $time-picker-cells-width;

    &-with-seconds {
      min-width: $time-picker-cells-width-with-seconds;
    }

    &-list {
      width: $time-picker-cells-width-base;
      max-height: $time-picker-cells-list-max-height;
      float: left;
      overflow: hidden;
      border-left: 1px solid $border-color-split;
      position: relative;
      @include theme-border-left-color($__time-picker-list_border-color);

      &:hover {
        overflow-y: auto;
        @include scrollbar;
      }

      &:first-child {
        border-left: none;
        border-radius: $btn-border-radius 0 0 $btn-border-radius;
      }

      &:last-child {
        border-radius: 0 $btn-border-radius $btn-border-radius 0;
      }

      ul {
        width: $time-picker-cells-list-ul-width;
        margin: $time-picker-cells-list-ul-margin;
        padding: $time-picker-cells-list-ul-padding;
        list-style: none;

        li {
          width: $time-picker-cells-list-ul-li-width;
          height: $time-picker-cells-list-ul-li-height;
          line-height: $time-picker-cells-list-ul-li-line-height;
          margin: $time-picker-cells-list-ul-li-margin;
          padding: $time-picker-cells-list-ul-li-padding;
          box-sizing: content-box;
          text-align: left;
          user-select: none;
          cursor: pointer;
          list-style: none;
          transition: background $transition-time $ease-in-out;
        }
      }
    }

    &-cell {
      @include theme-font-color($__time-picker-cell_font-color);
      &:hover {
        background: $background-color-select-hover;
        @include theme-background-color($__time-picker-cell_hover_background-color);
      }

      &-disabled {
        color: $btn-disable-color;
        cursor: $cursor-disabled;
        @include theme-font-color($__time-picker-cell_disabled_font-color);

        &:hover {
          color: $btn-disable-color;
          background-color: $time-picker-cells-cell-hover-background-color;
          cursor: $cursor-disabled;
          @include theme-font-color($__time-picker-cell_disabled-hover_font-color);
          @include theme-background-color($__time-picker-cell_disabled-hover_background-color);
        }
      }

      &-selected,
      &-selected:hover {
        color: $primary-color;
        background: $background-color-select-hover;
        @include theme-font-color($__time-picker-cell_selected_font-color);
        @include theme-background-color($__time-picker-cell_selected_background-color);
      }
    }
  }

  &-header {
    height: $time-picker-header-height;
    line-height: $time-picker-header-line-height;
    text-align: center;
    border-bottom: 1px solid $border-color-split;
    @include theme-border-color($__time-picker-header_border-color);
  }

  &-with-range {
    .#{$picker-prefix-cls}-panel {
      &-body {
        min-width: $time-picker-cells-width * 2 + 4px;
      }

      &-content {
        float: left;
        position: relative;

        &::after {
          content: "";
          display: block;
          width: $time-picker-with-range-content-after-width;
          position: absolute;
          top: $time-picker-with-range-content-after-top;
          bottom: $time-picker-with-range-content-after-bottom;
          right: $time-picker-with-range-content-after-right;
          background: $border-color-split;
          z-index: 1;
          @include theme-background-color($__time-picker-range-panel-content-after_background-color);
        }

        &-right {
          float: right;

          &::after {
            right: auto;
            left: $time-picker-with-range-content-right-after-left;
          }
        }
      }
    }
    .#{$time-picker-prefix-cls}-cells {
      &-list {
        &:first-child {
          border-radius: 0;
        }

        &:last-child {
          border-radius: 0;
        }
      }
    }
  }
  &-with-range.#{$time-picker-prefix-cls}-with-seconds {
    .#{$picker-prefix-cls}-panel {
      &-body {
        min-width: $time-picker-cells-width-with-seconds * 2 + 4px;
      }
    }
  }
}

.#{$picker-prefix-cls}-panel-content .#{$picker-prefix-cls}-panel-content .#{$time-picker-prefix-cls} {
  &-cells {
    min-width: $time-picker-cells-width-with-date-with-seconds;

    &-with-seconds {
      min-width: $time-picker-cells-width-with-date-with-seconds;
      .#{$time-picker-prefix-cls}-cells-list {
        width: $time-picker-cells-width-with-date-with-seconds / 3;

        ul {
          li {
            padding: $time-picker-panel-content-with-second-li-padding;
          }
        }
      }
    }

    &-list {
      width: $time-picker-cells-width-with-date-with-seconds / 2;
      max-height: $time-picker-panel-content-list-max-height;

      &:first-child {
        border-radius: 0;
      }

      &:last-child {
        border-radius: 0;
      }

      ul {
        padding: $time-picker-panel-content-list-ul-padding;

        li {
          padding: $time-picker-panel-content-list-li-padding;
        }
      }
    }
  }
}