@import '../style/common.less';
.@{css-prefix}date-picker {
  display: inline-block;
  &.bui-date-picker-disabled {
    .bui-date-picker-icon {
      fill: @date-picker-disabled-color;
    }
  }
}
.@{css-prefix}range-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  background-color: @input-bg;
  border-radius: @border-radius-base;
  border-width: 1px;
  border-style: solid;
  border-color: @date-range-picker-border;
  &:hover {
    border-color: @date-range-picker-hover-border;
    .bui-range-picker-suffix-has-clear .bui-range-picker-icon {
      opacity: 0;
    }
    .bui-range-picker-suffix-has-clear .bui-range-picker-clear {
      opacity: 1;
    }
  }
  &.bui-range-picker-active {
    border-color: @date-range-picker-active-border;
    box-shadow: @date-range-picker-active-box-shadow;
  }

  .bui-range-picker-separator {
    color: @date-range-picker-separator-color;
    font-size: @font-size-md;
    line-height: @line-height-md;
  }
  .bui-range-picker-suffix {
    display: inline-flex;
    position: relative;
    .bui-range-picker-icon,
    .bui-range-picker-clear {
      width: 14px;
      height: 14px;
      margin-right: 12px;
      fill: @date-range-picker-input-icon-color;
    }
    .bui-range-picker-clear {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      fill: @date-range-picker-input-clear-icon-color;
      opacity: 0;
    }
  }
  .bui-range-picker-input-wrapper {
    &:first-child {
      .bui-range-picker-input {
        border-radius: @border-radius-base;
      }
    }
    position: relative;
    flex: 1;
    font-size: @font-size-md;
    line-height: @line-height-md;
    .bui-range-picker-input {
      display: inline-block;
      width: 100%;
      padding: 5px  12px;
      outline: none;
      border: none;
      box-shadow: none;
      font-size: @font-size-md;
      line-height: @line-height-md;
      background-color: @bui-transparent;
      color: @date-range-picker-input-color;
      .placeholder();
      &:hover {
        color: @primary-color;

      }

      &[disabled] {
        cursor: not-allowed;
        color: @date-range-picker-input-disabled-color;
        .placeholder(@date-range-picker-input-disabled-color);
      }
    }
    &-active {
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 12px;
        right: 12px;
        border-top: 2px solid @date-range-picker-active-bar-color;
      }
    }
  }
  &.bui-range-picker-xs {
    .bui-range-picker-input-wrapper .bui-range-picker-input {
      padding: 2px 12px;
      font-size: @font-size-sm;
      line-height: @line-height-sm;
    }
  }
  &.bui-range-picker-sm {
    .bui-range-picker-input-wrapper .bui-range-picker-input {
      padding: 4px  12px;
      font-size: @font-size-sm;
      line-height: @line-height-sm;
    }
  }
  &.bui-range-picker-lg {
    .bui-range-picker-input-wrapper .bui-range-picker-input {
      padding: 7px  12px;
    }
  }
  &.bui-range-picker-xl {
    .bui-range-picker-input-wrapper .bui-range-picker-input {
      padding: 9px  12px;
    }
  }
  &.bui-range-picker-filled {
    .bui-range-picker-public-status();
  }
  &-error {
    .bui-range-picker-input-wrapper {
      &-active {
        &::after {
          border-top-color: @range-picker-fill-error-pointer-border;
        }
      }
      .bui-range-picker-input {
        &:hover {
          color: @range-picker-error-hover-color;
        }
      }
    }
    .bui-range-picker-public-status (
      @range-picker-plain-error-bg;
      @range-picker-plain-error-border;
      @range-picker-plain-hover-error-bg;
      @range-picker-plain-hover-error-border;
      @range-picker-plain-active-error-bg;
      @range-picker-plain-active-error-border;
      @range-picker-plain-focus-error-bg;
      @range-picker-plain-focus-error-border;
      @range-picker-plain-focus-error-shadow;
    )
  }
  &-error.bui-range-picker-filled {
    .bui-range-picker-public-status (
      @range-picker-fill-error-bg;
      @range-picker-fill-error-border;
      @range-picker-fill-hover-error-bg;
      @range-picker-fill-hover-error-border;
      @range-picker-fill-active-error-bg;
      @range-picker-fill-active-error-border;
      @range-picker-fill-focus-error-bg;
      @range-picker-fill-focus-error-border;
      @range-picker-fill-focus-error-shadow;
    );
    .bui-range-picker-input-wrapper {
      .bui-range-picker-input {
        &:hover {
          color: @range-picker-error-hover-color;
        }
      }
    }
  }
  &.bui-range-picker-disabled{
    &,
    &:hover {
      border-color: @date-range-picker-input-disabled-border;
      color: @date-range-picker-input-disabled-color;
      cursor: not-allowed;
      opacity: 1;
      background-color: @date-range-picker-input-disabled-bg;
      box-shadow: none;
    }
    .bui-range-picker-icon,
    .bui-range-picker-clear {
      fill: @date-range-picker-input-icon-disabled-color;
    }
    .bui-range-picker-separator {
      color: @date-range-picker-input-disabled-color;
    }
  }
  .bui-range-picker-prefix {
    color: @date-picker-prefix-color;
  }
}
// popper
.bui-picker-popper {
  background-color: @date-picker-popper-bg;
  box-shadow: @date-picker-popper-shadow;
  border-radius: @border-radius-base;
  margin-top: 4px;
  overflow: hidden;
  &-content {
    display: flex;
  }
  &-footer {
    padding: 8px 12px;
    border-top: 1px solid;
    border-top-color: @date-picker-popper-footer-border;
    text-align: right;
    &-clear {
      margin-right: 8px;
    }
  }
}
// panel-date, panel-datetime, bui-year-panels
.bui-date-panels,
.bui-datetime-panels,
.bui-year-panels,
.bui-month-panels,
.bui-time-panels {
  display: inline-flex;
  flex-wrap: nowrap;
  .bui-datetime-panel-divider {
    border-left: 1px solid @date-picker-panel-divider-color;
  }
}


// 日期板
.bui-date-panel {
  min-width: 284px;
  .bui-date-header {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: @date-picker-date-panel-header-bg;
    padding: 8px 16px;
    height: @date-picker-panel-header-height;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: @date-picker-date-panel-header-divider-color;
    font-size: @font-size-md;
    line-height: @line-height-md;
    &-text {
      flex: 1;
      font-size: @font-size-md;
      line-height: @line-height-md;
      font-weight: @font-weight-bold;
      color: @date-picker-date-panel-header-text-color;
      display: flex;
      justify-content: center;
      &-btn {
        display: inline-block;
        cursor: pointer;
        &:first-child {
          margin-right: 4px;
        }
        &:hover {
          color: @date-picker-date-panel-header-hover-color;
        }
      }
    }
    &-prev-year,
    &-prev-month,
    &-next-month,
    &-next-year {
      user-select: none;
      fill: @date-picker-date-panel-header-color;
      cursor: pointer;
      width: 18px;
      height: 18px;
      &:hover {
        fill: @date-picker-date-panel-header-hover-color;
      }
    }
    &-prev-month {
      margin-left: 8px;
    }
    &-next-month {
      margin-right: 8px;
    }
    .bui-date-header-btn-hidden {
      visibility: hidden;
    }
  }
  .bui-date-body {
    padding: 8px 12px;
    display: flex;
    .bui-date-week {
      margin: -8px 0;
      padding-top: 8px;
      padding-bottom: 8px;
      padding-right: 12px;
      display: flex;
      flex-direction: column;
      border-right: 1px solid @date-picker-date-panel-body-date-week-header-divider-color;
      font-size: @font-size-md;
      &-header {
        height: @date-picker-date-cell-header-height;
        line-height: @date-picker-date-cell-header-height;
        color: @date-picker-date-panel-body-date-week-header-color;
      };
      &-cell {
        height: @date-picker-date-cell-height;
        line-height: @date-picker-date-cell-height;
        color: @date-picker-date-panel-week-cell-color;
        cursor: pointer;
        &-inner {
          display: inline-block;
          width: @date-picker-date-cell-inner-width;
          height: @date-picker-date-cell-inner-height;
          line-height: @date-picker-date-cell-inner-height;
          border-radius: @border-radius-base;
          text-align: center;
        }
        &-hover {
          .bui-date-week-cell-inner {
            background-color: @date-picker-date-panel-week-cell-hover-bg;
          }
        }
        &-selected{
          .bui-date-week-cell-inner {
            background-color: @date-picker-date-panel-week-cell-active-bg;
            color: @date-picker-date-panel-week-cell-active-color;
          }
        }
      }
    }
    .bui-date-table {
      border: none;
      flex: 1;
      width: 252px;
      margin: 0 4px;
      .bui-date-day {
        border: none;
        width: @date-picker-date-cell-header-width;
        height: @date-picker-date-cell-header-height;
        color: @date-picker-date-panel-body-date-table-header-date-day-color;
        line-height: @date-picker-date-cell-header-height;
        text-align: center;
        background-color: transparent;
        font-size: @font-size-md;
        font-weight: normal;
        word-break: initial;
        padding: 0;
      }

      .bui-date-cell {
        padding: @date-picker-date-cell-padding-top @date-picker-date-cell-padding-left;
        border: none;
        text-align: center;
        cursor: pointer;
        position: relative;
        font-size: @font-size-md;
        line-height: @line-height-md;

        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          right: 0;
          transform: translateY(-50%);
          height: @date-picker-date-cell-inner-height;
        }
        .bui-date-cell-inner {
          display: inline-block;
          position: relative;
          box-sizing: border-box;
          width: @date-picker-date-cell-inner-width;
          height: @date-picker-date-cell-inner-height;
          line-height: @date-picker-date-cell-inner-height;
          text-align: center;
          font-size: @font-size-md;
          color: @date-picker-date-panel-date-cell-color;
          border-radius: @border-radius-base;
          z-index: @date-picker-date-cell-inner-zindex;

          &:hover {
            background-color: @date-picker-date-panel-date-cell-hover-bg;
          }
        }
        .date-cell(bui-date-cell; @date-picker-date-cell-padding-left);

        // week hover
        &.bui-date-cell-week-hover {
          &::before {
            background: @date-picker-date-panel-date-cell-hover-bg;
          }
        }
        // week selected
        &.bui-date-cell-week-selected {
          &,
          &:hover {
            .bui-date-cell-inner {
              color: @date-picker-date-panel-date-cell-active-color;
              background-color: transparent;
            }
          }
          &::before {
            background: @primary-color;
          }
          &.bui-date-cell-in-view.bui-date-cell-now {
            .bui-date-cell-inner{
              background-color: @text-color-white;
              color: @primary-color;
            }
          }
        }

      }

    }
  }
}
// 年份板
.bui-year-panel {
  min-width: 284px;
  .bui-year-header{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: @date-picker-year-panel-header-bg;
    padding: 8px 16px;
    height: @date-picker-panel-header-height;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: @date-picker-year-panel-header-divider-color;
    font-size: @font-size-md;
    line-height: @line-height-md;
    &-text {
      flex: 1;
      font-size: @font-size-md;
      line-height: @line-height-md;
      font-weight: @font-weight-bold;
      color: @date-picker-year-panel-header-color;
      display: flex;
      justify-content: center;
      &-btn {
        display: inline-block;
        &:first-child {
          margin-right: 4px;
        }
        &:last-child {
          margin-left: 4px;
        }
      }
    }
    &-prev-year,
    &-next-year {
      user-select: none;
      fill: @date-picker-year-panel-header-icon-color;
      cursor: pointer;
      width: 18px;
      height: 18px;
      &:hover {
        fill: @date-picker-year-panel-header-hover-color;
      }
    }
    .bui-year-header-btn-hidden {
      visibility: hidden;
    }
  }
  .bui-year-body {
    padding: 12px 16px;
    display: flex;
  }
  .bui-year-table{
    border: none;
    flex: 1;
    width: 252px;

    .bui-year-cell {
      padding: @date-picker-year-cell-padding-top @date-picker-year-cell-padding-left;
      border: none;
      text-align: center;
      cursor: pointer;
      position: relative;
      font-size: @font-size-md;
      line-height: @line-height-md;
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        height: @date-picker-date-cell-inner-height;
      }
      .bui-year-cell-inner{
        display: inline-block;
        position: relative;
        box-sizing: border-box;
        width: @date-picker-year-cell-width;
        height: @date-picker-year-cell-height;
        line-height: @date-picker-year-cell-height;
        text-align: center;
        font-size: @font-size-md;
        color: @date-picker-year-panel-year-cell-color;
        border-radius: @border-radius-base;
        z-index: @date-picker-date-cell-inner-zindex;
        &:hover {
          background-color: @date-picker-year-panel-year-cell-hover-bg;
        }
      }
      &.bui-year-cell-in-view {
        .bui-year-cell-inner {
          color: @date-picker-year-panel-year-cell-in-view-color;
        }
      }
      .date-cell(bui-year-cell; @date-picker-year-cell-padding-left);
    }
  }
}
// 季度板
.bui-quarter-panel {
  min-width: 284px;
  .bui-quarter-header{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: @date-picker-quarter-panel-header-bg;
    padding: 8px 16px;
    height: @date-picker-panel-header-height;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: @date-picker-quarter-panel-header-divider-color;
    font-size: @font-size-md;
    line-height: @line-height-md;
    .bui-quarter-header-btn{
      cursor: pointer;
    }
    &-text {
      flex: 1;
      font-size: @font-size-md;
      line-height: @line-height-md;
      font-weight: @font-weight-bold;
      color: @date-picker-quarter-panel-header-color;
      display: flex;
      justify-content: center;
      cursor: pointer;
      &-btn {
        display: inline-block;
        &:first-child {
          margin-right: 4px;
        }
        &:last-child {
          margin-left: 4px;
        }
      }
    }
    .bui-quarter-header-btn-hidden {
      visibility: hidden;
    }
    &-prev-year,
    &-next-year {
      user-select: none;
      fill: @date-picker-quarter-panel-header-icon-color;
      cursor: pointer;
      width: 18px;
      height: 18px;
      &:hover {
        fill: @date-picker-quarter-panel-header-hover-color;
      }
    }
  }
  .bui-quarter-body {
    padding:  16px;
    display: flex;
  }
  .bui-quarter-table{
    border: none;
    flex: 1;
    width: 252px;
    .bui-quarter-cell{
      padding: @date-picker-year-cell-padding-top @date-picker-quarter-cell-padding-left;
      border: none;
      text-align: center;
      cursor: pointer;
      position: relative;
      font-size: @font-size-md;
      line-height: @line-height-md;
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        height: @date-picker-date-cell-inner-height;
      }
      .bui-quarter-cell-inner{
        display: inline-block;
        position: relative;
        box-sizing: border-box;
        width: @date-picker-year-cell-width;
        height: @date-picker-year-cell-height;
        line-height: @date-picker-year-cell-height;
        text-align: center;
        font-size: @font-size-md;
        color: @date-picker-quarter-panel-quarter-cell-color;
        border-radius: @border-radius-base;
        z-index: @date-picker-date-cell-inner-zindex;

        &:hover {
          background-color: @date-picker-quarter-panel-quarter-cell-hover-bg;
        }
      }
      .date-cell(bui-quarter-cell; @date-picker-quarter-cell-padding-left;);
    }
  }
}
// 月份板
.bui-month-panel {
  min-width: 284px;
  .bui-month-header{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: @date-picker-month-panel-header-bg;
    padding: 8px 16px;
    height: @date-picker-panel-header-height;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: @date-picker-month-panel-header-divider-color;
    font-size: @font-size-md;
    line-height: @line-height-md;
    .bui-month-header-btn{
      cursor: pointer;
    }
    &-text {
      flex: 1;
      font-size: @font-size-md;
      line-height: @line-height-md;
      font-weight: @font-weight-bold;
      color: @date-picker-month-panel-header-color;
      display: flex;
      justify-content: center;
      cursor: pointer;
      &-btn {
        display: inline-block;
        &:first-child {
          margin-right: 4px;
        }
        &:last-child {
          margin-left: 4px;
        }
      }
    }
    .bui-month-header-btn-hidden {
      visibility: hidden;
    }
    &-prev-year,
    &-next-year {
      user-select: none;
      fill: @date-picker-month-panel-header-icon-color;
      cursor: pointer;
      width: 18px;
      height: 18px;
      &:hover {
        fill: @date-picker-month-panel-header-hover-color;
      }
    }
  }
  .bui-month-body {
    padding:  16px;
    display: flex;
  }
  .bui-month-table{
    border: none;
    flex: 1;
    width: 252px;
    .bui-month-cell{
      padding: @date-picker-year-cell-padding-top @date-picker-year-cell-padding-left;
      border: none;
      text-align: center;
      cursor: pointer;
      position: relative;
      font-size: @font-size-md;
      line-height: @line-height-md;
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        height: @date-picker-date-cell-inner-height;
      }
      .bui-month-cell-inner{
        display: inline-block;
        position: relative;
        box-sizing: border-box;
        width: @date-picker-year-cell-width;
        height: @date-picker-year-cell-height;
        line-height: @date-picker-year-cell-height;
        text-align: center;
        font-size: @font-size-md;
        color: @date-picker-month-panel-month-cell-color;
        border-radius: @border-radius-base;
        z-index: @date-picker-date-cell-inner-zindex;

        &:hover {
          background-color: @date-picker-month-panel-month-cell-hover-bg;
        }
      }
      .date-cell(bui-month-cell; @date-picker-year-cell-padding-left;);
    }
  }
}
// 时间板
.bui-time-panel {
  &-header {
    background-color: @date-picker-time-panel-header-bg;
    padding: 8px 16px;
    height: @date-picker-panel-header-height;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: @border-color-split;
    font-size: @font-size-md;
    line-height: @line-height-md;
    text-align: center;
    font-weight: @font-weight-bold;
    color: @date-picker-time-panel-header-color;
  }
  &-body {
    display: flex;
    position: relative;
  }
  & + & {
    border-left: 1px solid @date-picker-time-panel-header-divider-color;
  }
}
.bui-time-column {
  max-height: 238px;
  overflow-y: auto;
  width: 67px;
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  &::after{
    content: '';
    display: block;
    height: calc(100% - 30px);
    width: 100%;
  }
  & + & {
    border-left: 1px solid @date-picker-time-panel-body-divider-color;
  }

  .bui-time-option {
    padding: 4px 0;
    margin: 0;
    text-align: center;
    font-size: @font-size-md;
    line-height: @line-height-md;
    color: @date-picker-time-panel-option-color;
    cursor: pointer;
    position: relative;
    display: block;

    &:hover:not(.bui-time-unit-disabled) {
      background-color: @date-picker-time-panel-option-hover-bg;
    }
    &.bui-time-option-selected {
      color: @date-picker-time-panel-option-active-color;
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 32px;
        margin-top: -16px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: @border-color-split;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: @border-color-split;
      }
    }
    &:first-child.bui-time-option-selected {
      &::after {
        border-top: none;
      }
    }
    &.bui-time-option-disabled {
      cursor: not-allowed;
      color: @date-picker-time-panel-option-disabled-color;
    }
  }
}
// 快捷选项
.bui-picker-shortcuts {
  border-right: 1px solid @date-picker-shortcuts-panel-divider-color;
  width: @date-picker-shortcuts-width;
  overflow-y: auto;
  padding: 4px 0;
  max-height: 276px;
  .bui-shortcuts-panel {
    .bui-shortcut-item {
      padding: 8px 12px;
      font-size: @font-size-sm;
      line-height: @line-height-sm;
      color: @date-picker-shortcuts-panel-color;
      cursor: pointer;
      &:hover {
        background-color: @date-picker-shortcuts-panel-hover-bg;
      }
    }
  }
}
//底部插槽
.bui-picker-popper-footer-extra {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: @date-picker-footer-slot-divider-color;
  padding: 12px;
  font-size: @font-size-md;
  line-height: @line-height-md;
}



// RTL

.bui-date-picker-rtl {
  direction: rtl;
}
.bui-range-picker-rtl {
  direction: rtl;
  .bui-range-picker-suffix {
    .bui-range-picker-icon, .bui-range-picker-clear {
      margin-left: 12px;
      margin-right: 0;
    }
  }
}
.bui-picker-popper-rtl {
  direction: rtl;
  .bui-date-panel {
    .bui-date-body {
      .bui-date-week {
        padding-right: 0;
        padding-left: 12px;
        border-right: none;
        border-left: 1px solid @border-color-split;
      }
      .bui-date-table {
        .bui-date-cell {
          .date-cell-rtl(bui-date-cell; @date-picker-date-cell-padding-left);
        }
      }
    }
  }

  .bui-year-panel {
    .bui-year-table{
      .bui-year-cell {
        .date-cell-rtl(bui-year-cell; @date-picker-year-cell-padding-left;);
      }
    }
  }
  .bui-month-panel {
    .bui-month-table {
      .bui-month-cell{
        .date-cell-rtl(bui-month-cell; @date-picker-year-cell-padding-left;);
      }
    }
  }
  .bui-time-panel {
    border-left: none;
    &:not(:last-child) {
      border-left: 1px solid @border-color-split;
    }
  }
  .bui-time-column {
    border-left: none;
    &:not(:last-child) {
      border-left: 1px solid @border-color-split;
    }
  }
  .bui-picker-shortcuts {
    border-right: none;
    border-left: 1px solid @border-color-split;
  }
}


// mixins
.date-cell(@cell-prefix-cls; @padding) {
  // 当前月
  &.@{cell-prefix-cls}-in-view {
    .@{cell-prefix-cls}-inner {
      color: @date-picker-panel-cell-in-view-color;
    }
  }
  // 行首
  &.@{cell-prefix-cls}-row-start {
    &::before {
      left: @date-picker-date-cell-padding-left;
      border-top-left-radius: @border-radius-base;
      border-bottom-left-radius: @border-radius-base;
    }
  }
  // 行尾
  &.@{cell-prefix-cls}-row-end {
    &::before {
      right: @date-picker-date-cell-padding-left;
      border-top-right-radius: @border-radius-base;
      border-bottom-right-radius: @border-radius-base;
    }
  }

  // today
  &.@{cell-prefix-cls}-in-view.@{cell-prefix-cls}-now {
    .@{cell-prefix-cls}-inner {
      color: @date-picker-panel-cell-now-color;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border-width: 1px;
        border-style: solid;
        border-color: @primary-color;
        border-radius: @border-radius-base;
      }
    }
  }
  // selected
  &.@{cell-prefix-cls}-in-view.@{cell-prefix-cls}-selected {
    .@{cell-prefix-cls}-inner {
      z-index: @date-picker-date-cell-selected-inner-zindex;
      background-color: @date-picker-panel-cell-active-bg;
      color: @date-picker-panel-cell-active-color;
    }
  }
  // 当月开始
  &.@{cell-prefix-cls}-range-edge-start::before {
    border-top-left-radius: @border-radius-base;
    border-bottom-left-radius: @border-radius-base;
  }
  // 当月结束
  &.@{cell-prefix-cls}range-edge-end::before {
    border-top-right-radius: @border-radius-base;
    border-bottom-right-radius: @border-radius-base;
  }
  // 禁用
  &.@{cell-prefix-cls}-disabled {
    cursor: not-allowed;
    color: @disabled-default-color;
    .@{cell-prefix-cls}-inner {
      color: @date-picker-panel-cell-disabled-color;
      background-color: @date-picker-panel-cell-disabled-bg;
      &:hover {
        background-color: @date-picker-panel-cell-hover-disabled-bg;
      }
    }
  }
  &.@{cell-prefix-cls}-range {
    &::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      height: @date-picker-date-cell-inner-width;
      background-color: @date-picker-date-in-range-bg;
    }
    &:not(.@{cell-prefix-cls}-selected)
    .@{cell-prefix-cls}-inner:hover {
      background-color: transparent;
    }
  }

  &.@{cell-prefix-cls}-range-hover {
    &::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      height: @date-picker-date-cell-inner-width;
      background-color: @date-picker-date-in-range-hover-bg;
    }
    &:not(.@{cell-prefix-cls}-selected)
    .@{cell-prefix-cls}-inner:hover {
      background-color: @date-picker-panel-cell-in-range-not-active-hover-bg;
    }
  }

  &.@{cell-prefix-cls}-hover {
    &::after {
      content: "";
      position: absolute;
      box-sizing: border-box;
      left: 2px;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      height: @date-picker-date-cell-inner-width;
      border-top: 1px dashed @date-picker-panel-cell-hover-border;
      border-bottom: 1px dashed @date-picker-panel-cell-hover-border;
    }
    &:not(.@{cell-prefix-cls}-selected)
    .@{cell-prefix-cls}-inner:hover {
      background-color: @date-picker-panel-cell-not-active-hover-bg;
    }
  }

  &.@{cell-prefix-cls}-before-left-after-right {
    &::before {
      left: @padding;
      border-top-left-radius: @border-radius-base;
      border-bottom-left-radius: @border-radius-base;
    }
    &::after {
      left: 0;
      right: @padding;
      border-top-right-radius: @border-radius-base;
      border-bottom-right-radius: @border-radius-base;
    }
  }

  &.@{cell-prefix-cls}-left {
    &::before {
      left: @padding;
      border-top-left-radius: @border-radius-base;
      border-bottom-left-radius: @border-radius-base;
    }

    &::after {
      left: @padding;
      border-top-left-radius: @border-radius-base;
      border-bottom-left-radius: @border-radius-base;
      border-left: 1px dashed @date-picker-panel-cell-left-border;
    }
  }

  &.@{cell-prefix-cls}-before-right-after-left {
    &::before {
      right: @padding;
      border-top-right-radius: @border-radius-base;
      border-bottom-right-radius: @border-radius-base;
    }

    &::after {
      right: 0;
      left: @padding;
      border-top-left-radius: @border-radius-base;
      border-bottom-left-radius: @border-radius-base;
    }
  }

  &.@{cell-prefix-cls}-right {
    &::before {
      right: @padding;
      border-top-right-radius: @border-radius-base;
      border-bottom-right-radius: @border-radius-base;
    }

    &::after {
      right: @padding;
      border-top-right-radius: @border-radius-base;
      border-bottom-right-radius: @border-radius-base;
      border-right: 1px dashed @date-picker-panel-cell-right-border;
    }
  }
}

.date-cell-rtl(@cell-prefix-cls; @padding) {
  &::before {
    left: 0;
    right: 0;
    border-radius: 0;
  }
  &::after {
    left: 0;
    right: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  // 行首
  &.@{cell-prefix-cls}-row-start {
    &::before {
      right: @date-picker-date-cell-padding-left;
      border-top-right-radius: @border-radius-base;
      border-bottom-right-radius: @border-radius-base;
    }
  }
  // 行尾
  &.@{cell-prefix-cls}-row-end {
    &::before {
      left: @date-picker-date-cell-padding-left;
      border-top-left-radius: @border-radius-base;
      border-bottom-left-radius: @border-radius-base;
    }
  }

  // 当月开始
  &.@{cell-prefix-cls}-range-edge-start::before {
    border-top-right-radius: @border-radius-base;
    border-bottom-right-radius: @border-radius-base;
  }
  // 当月结束
  &.@{cell-prefix-cls}range-edge-end::before {

    border-top-left-radius: @border-radius-base;
    border-bottom-left-radius: @border-radius-base;
  }

  &.@{cell-prefix-cls}-before-left-after-right {
    &::before {

      right: @padding;
      border-top-right-radius: @border-radius-base;
      border-bottom-right-radius: @border-radius-base;
    }


    &::after {
      // benshenjiuyou
      right: 0;
      left: @padding;
      border-top-left-radius: @border-radius-base;
      border-bottom-left-radius: @border-radius-base;
    }
  }

  &.@{cell-prefix-cls}-left {
    &::before {

      right: @padding;

      border-top-right-radius: @border-radius-base;
      border-bottom-right-radius: @border-radius-base;
    }

    &::after {

      right: @padding;
      border-top-right-radius: @border-radius-base;
      border-bottom-right-radius: @border-radius-base;
      border-right: 1px dashed @date-picker-panel-cell-left-border;
    }
  }

  &.@{cell-prefix-cls}-before-right-after-left {
    &::before {

      left: @padding;
      border-top-left-radius: @border-radius-base;
      border-bottom-left-radius: @border-radius-base;
    }

    &::after {
      // 本身就有
      right: @padding;
      left: 0;
      border-top-right-radius: @border-radius-base;
      border-bottom-right-radius: @border-radius-base;
    }
  }

  &.@{cell-prefix-cls}-right {
    &::before {
      left: @padding;
      border-top-left-radius: @border-radius-base;
      border-bottom-left-radius: @border-radius-base;
    }

    &::after {
      left: @padding;
      border-top-left-radius: @border-radius-base;
      border-bottom-left-radius: @border-radius-base;
      border-left: 1px dashed @date-picker-panel-cell-right-border;
    }
  }
}
.bui-range-picker-public-status(
  @bg:@date-range-picker-filled-bg;@border:@date-range-picker-filled-border;
  @hover-bg:@date-range-picker-filled-hover-bg;@hover-border:@date-range-picker-filled-hover-border;
  @active-bg: @date-range-picker-filled-active-bg; @active-border: @date-range-picker-filled-active-border;
  @focus-bg: @date-range-picker-filled-focus-bg; @focus-border: @date-range-picker-filled-focus-border;
  @focus-shadow: @date-range-picker-filled-focus-box-shadow;
  @disabled-border: @input-disabled-border;
) {
  background-color: @bg;
  border-color: @border;
  &:hover {
    background-color: @hover-bg;
    border-color: @hover-border;
  }
  &:active,
  &.active {
    border-color: @active-border;
    background-color: @active-bg;
  }
  &:focus,
  &.bui-range-picker-active {
    border-color: @focus-border;
    box-shadow: @focus-shadow;
    background-color: @focus-bg;
  }
  &-disabled {
    border-color: @disabled-border;
  }
}
.@{css-prefix}-picker-panel {
  display: inline-block;
  border-radius: @border-radius-base;
  border-width: 1px;
  border-style: solid;
  border-color: @date-range-picker-border;
}