@time-picker-prefix-cls: ~"@{css-prefix}time-picker";
@picker-prefix-cls: ~"@{css-prefix}picker";
@date-picker-cells-width: 216px;

@time-spinner-prefix-cls: ~"@{css-prefix}time-spinner";
@time-spinner-cells-width-base: 70px;
@time-spinner-cells-width: @time-spinner-cells-width-base * 2;
@time-spinner-cells-width-with-seconds: @time-spinner-cells-width-base *3;
@time-spinner-cells-width-base-range: 30px;
@time-spinner-cells-width-range: @time-spinner-cells-width-base-range * 2;
@time-spinner-cells-width-with-seconds-range: @time-spinner-cells-width-base-range * 3 - 300px;

.@{time-picker-prefix-cls} {
  ::-webkit-scrollbar {
    width: 4px;
    cursor: pointer;
  }
  ::-webkit-scrollbar-track {
    background-color: @color-scrollbar-track !important;
  }
  ::-webkit-scrollbar-thumb {
    background-color: @color-scrollbar !important;
    border-radius: 4px;
  }
  display: inline-block;
  line-height: normal;
  &-rel{
    position: relative;
  }
  .@{css-prefix}input-suffix{
    font-size: @font-size-middle;
    color: @color-complementary-5;
    cursor: pointer;
  }
  .@{css-prefix}input-wrapper-disabled .@{css-prefix}input-suffix {
    cursor: not-allowed;
  }
  .@{select-dropdown-prefix-cls} {
    width: auto;
    padding: 0;
    overflow: visible;
    max-height: none;
    margin:8px 0;
  }
  &-transfer{
    z-index: @zindex-transfer;
    max-height: none;
    width: auto;
  }

  &-focused input{
    .active();
  }

  &-presently{
    position: absolute;
    bottom: 5px;
    right: 100px;
  }

  &-timeStyle {
    width: 18px;
    display: inline-block;
  }
}

.@{time-spinner-prefix-cls} {
  &-cells{
    display: flex;
    justify-content: center;
    align-items:center;
    padding: 0 16px;
    &-with-seconds{
      min-width: @time-spinner-cells-width-with-seconds;
    }

    &-list{
      width: @time-spinner-cells-width-base;
      max-height: 220px;
      float: left;
      overflow: hidden;
      position: relative;
      padding: 3px;
      &:hover{
        overflow-y: auto;
      }
      ul{
        width: 100%;
        margin: 0;
        list-style: none;
        padding: 0 0 190px 0;
        li{
          padding-left: 25px;
          height: 24px;
          line-height: 24px;
          margin: 8px 0 0 0;
          box-sizing: content-box;
          text-align: left;
          user-select: none;
          cursor: pointer;
          list-style: none;
          transition: background @transition-time @ease-in-out;
          border-radius: 4px;
        }
      }
      &:first-child ul li {
        border-radius: 4px;
      }
      &:last-child ul li {
        border-radius: 4px;
      }
    }
    &-cell{
      &:hover{
        &::before {
          opacity: 0.4; /* 悬停时透明度为 40% */
        }
        background:@blue-50;
      }
      &-disabled {
        color: @color-brand-disabled2;
        // cursor: @cursor-disabled;

        &:hover {
          color: @color-brand-disabled2;
          background-color: @color-bg-disable;
          // cursor: @cursor-disabled;
        }
      }
      &-selected ,&-selected:hover{
        height: 24px;
        color: @color-functional-white;
        background: @color-brand-primary;
      }
      &-focused{
        background-color: tint(@color-brand-primary, 80%);
      }
    }
  }

  &-header{
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-bottom: 1px solid @color-scrollbar;
  }

  &-with-range{
    .@{picker-prefix-cls}-panel{
      &-body{
        min-width: @time-spinner-cells-width-range * 2 + 4px;
      }
      &-content{
        float: left;
        position: relative;
        &-right{
          float: right;
          &:after{
            right: auto;
            left: -2px;
          }
        }
      }
    }
    .@{time-spinner-prefix-cls}-cells{
      &-with-seconds{
        min-width: @time-spinner-cells-width-with-seconds-range;
      }
      &-list{
        width: @time-spinner-cells-width-base-range;
        ul {
          li {
            padding-left: 7px;
          }
        }
        &:first-child{
          border-radius: 4px;
        }
        &:last-child{
          border-radius: 4px;
        }
      }
    }
  }
}