@date-picker-prefix: ~'@{prefix}date';
@time-picker-prefix: ~'@{prefix}time';
@datetime-picker-prefix: ~'@{prefix}datetime';
@date-picker-cells-width: 196px;
.@{datetime-picker-prefix}-range {
  .@{datetime-picker-prefix}-show {
    min-width: (@font-size-mini * 16);
  }
}

.@{datetime-picker-prefix}-full-range {
  .@{datetime-picker-prefix}-show {
    min-width: (@font-size-mini * 18);
  }
}

.@{date-picker-prefix} {
  &-picker {
    border: @border;
    .@{date-picker-prefix} {
      &-shortcut {
        border-radius: @border-radius 0 0 @border-radius;
        width: (@font-size-mini * 8);
        font-size: 12px;
        line-height: 28px;
        background: lighten(@gray4-color, 1%);
        border-right: @border;
        padding: 10px 0;
        > div {
          padding: 3px 10px;
          .h-func-li-hover();
        }
      }
      &-container {
        display: flex;
      }
      &-full-range-container {
        display: block;
        min-width: 260px;
        .h-tabs {
          padding: 0;
          > .h-tabs-item {
            margin-left: 5px;
            padding: 10px;
            &:first-of-type {
              margin-left: 0;
            }
          }
        }
      }
      &-range-container {
        > .@{date-picker-prefix}-content:last-child {
          border-left: @border;
        }
      }
      &-content {
        padding: 10px;
      }
      &-self-defined {
        padding: 15px;
        text-align: center;
        .@{prefix}input {
          width: 110px;
        }
      }
      &-footer {
        padding: 5px 10px;
        text-align: right;
        border-top: @border;
      }
      &-header {
        text-align: center;
        line-height: @input-height;
        > span {
          .h-func-text-hover();
          display: inline-block;
        }
        &-show {
          margin: 0 3px;
        }
        .@{date-picker-prefix} {
          &-year-left-picker,
          &-year-right-picker {
            > i + i {
              margin-left: -7px;
            }
          }
          &-month-left-picker,
          &-year-left-picker,
          &-month-right-picker,
          &-year-right-picker {
            color: @dark4-color;
            font-size: 12px;
            margin: 0 3px;
          }
          &-month-left-picker,
          &-year-left-picker {
            float: left;
          }
          &-month-right-picker,
          &-year-right-picker {
            float: right;
          }
        }
      }
      &-body {
        margin: 8px auto 0;
        font-size: @font-size-mini;
        width: 224px;
        > div > span {
          width: 32px;
          height: 32px;
          line-height: 32px;
          display: inline-block;
          text-align: center;
          user-select: none;
        }
        &-weeks {
          font-weight: bold;
        }
        &-pickers {
          > span {
            cursor: default;
            &:hover {
              background-color: @hover-background-color;
            }
            &.@{date-picker-prefix} {
              &-today {
                color: @primary-color;
              }
              &-selected {
                background-color: @primary-color;
                color: @white-color;
              }
              &-start-selected {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
              }
              &-end-selected {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
              }
              &-range-selected {
                border-radius: 0;
                background-color: @highlight-background-color;
              }
              &-not-now-day {
                color: @gray1-color;
                background-color: @white-color;
              }
              &-disabled {
                background-color: @gray4-color;
                color: @disabled-color;
                pointer-events: none;
              }
            }
          }
        }
        &-month,
        &-year,
        &-date {
          > div > span {
            border-radius: 50%;
          }
        }
        &-month,
        &-year {
          > div > span {
            height: 50px;
            width: 50px;
            line-height: 50px;
            margin: 3px;
          }
        }
        &-week,
        &-quarter {
          min-width: 200px;
          width: auto;
          > div > span {
            border-radius: 5px;
            width: 100%;
            display: block;
            padding-left: 10px;
            padding-right: 10px;
          }
        }
        &-minute,
        &-hour {
          > div > span {
            border-radius: 5px;
            height: 30px;
            width: 50px;
            line-height: 30px;
            margin: 3px;
          }
        }
      }
    }
  }
}

.@{datetime-picker-prefix} {
  &-input-border {
    display: inline-block;
    vertical-align: middle;
    .@{prefix}input {
      width: 100%;
    }
    .@{datetime-picker-prefix}-show:hover,
    .@{pop-ref-prefix} {
      > input:not([disabled]) {
        border-color: @primary-color;
        box-shadow: @box-shadow-input;
      }
    }
  }
}