@import "../common/var";

@include b(time-range-spinner) {
  position: relative;
  width: 100%;
  white-space: nowrap;
  display: flex;

  .active-block {
    position: absolute;
    top: 4px;
    left: 0;
    width: 100%;
    height: 24px;
    display: flex;

    .active-item {
      flex: 1;
      height: 100%;
      margin: 0 4px;
      // border-radius: 4px;
      border-radius: $--border-radius-medium;
      background: $--color-primary;

      &.disabled {
        background-color: $--color-fill-3;
        border-color: $--color-fill-3;
      }
    }
  }

  @include e(wrapper) {
    max-height: 210px;
    overflow: auto;
    display: inline-block;
    width: 50%;
    vertical-align: top;
    position: relative;
    margin-top: 4px;

    .el-scrollbar__bar {
      display: none;
    }
    .el-scrollbar__wrap {
      overflow-x: hidden;
      .el-time-range-spinner__item {
        width: calc(100% - 8px)
      }
      .el-time-range-spinner__item.active.disabled {
        color: $--color-text-4;
      }
    }

    & .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
      padding-bottom: 15px;
    }
  }


  @include e(input) {
    &.el-input {
      width: 70%;

      .el-input__inner {
        padding: 0;
        text-align: center;
      }
    }
  }

  @include e(list) {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;

    &::after{
      content: '';
      display: block;
      width: 100%;
      // 如果没调整好会导致59分或59秒位置不正常
      height: 166px;
    }
  }

  @include e(item) {
    height: 24px;
    line-height: 24px;
    font-size: $--font-size-body-3;
    border-radius: $--border-radius-small;
    min-width: $--datepicker-item-min-width;
    margin: 0 4px 4px;
    color: $--datepicker-font-color;

    &:hover:not(.disabled):not(.active) {
      background: $--color-secondary;
      cursor: pointer;
    }

    &.active:not(.disabled), &.active.disabled {
      color: $--color-white;
    }

    &.disabled {
      color: $--color-secondary-active;
      cursor: not-allowed;
    }
  }
}

.el-time-range-spinner_disable >.el-scrollbar__wrap{
  overflow-y: hidden;
  margin-right: 0!important;
}