/**
 *
 * This file may have been modified by Bytedance Inc. (“Bytedance Inc.'s Modifications”). 
 * All Bytedance Inc.'s Modifications are Copyright (year) Bytedance Inc..  
 * 
 * This source code is licensed under the Apache license.
 * See LICENSE file in the project root for license information.
 *
 */
@scrollList-color-default-default-border: @color-line-1;
@scrollListItem-color-default-default-bg: transparent;
@scrollListItem-color-default-default-text: @color-text-icon-1;
@scrollListItem-color-default-disabled-text: @color-text-icon-3;
@scrollListItem-color-default-hover-bg: @color-fill-deepen-4;
@scrollListItem-color-default-selected-bg: @color-primary-bright;
@scrollListItem-color-default-selected-text: @color-text-icon-0;

@prefix: sp;
@module: ~'@{prefix}-timepicker';
@module-list: ~'@{prefix}-scrolllist';
@scroll-list-height: 236px;
@scroll-list-item-height: 32px;

@range-picker-panel-split-border-default-color: var(--color-border);
@range-panel-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
@range-panel-border: 1px solid rgba(0, 0, 0, 0.1);
@range-panel-radius: 6px;

.@{module-list} {
  width: 100%;
  height: 100%;
  user-select: none;
  display: flex;
  flex-direction: column;
  &-header {
    text-align: center;
    &-title {
      padding: @Spacing-6 0;
      font-size: 14px;
      line-height: 20px;
      font-weight: 500;
      color: @color-text-icon-0;
    }
  }

  &-body {
    display: flex;
    height: @scroll-list-height;
    // padding: 0 16px;
    overflow: hidden;

    .@{module-list}-item-wheel .@{module-list}-list-outer-nocycle,
    .@{module-list}-item {
      & > ul {
        &:before {
          content: '';
          display: block;
          width: 100%;
          height: (@scroll-list-height - @scroll-list-item-height) / 2;
        }
      }
    }

    .@{module-list}-item {
      position: relative;
      flex: 1;
      overflow-x: hidden;
      overflow-y: auto;
      &:not(:last-child) {
        border-right: solid 1px @scrollList-color-default-default-border;
      }
    }
    .@{module-list}-item,
    .@{module-list}-item-wheel .@{module-list}-list-outer {
      & > ul {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 0 0 (@scroll-list-height - @scroll-list-item-height) / 2;
        list-style: none;

        & > li {
          list-style: none;
          height: @scroll-list-item-height;
          width: 80px;
          box-sizing: border-box;
          color: @scrollListItem-color-default-default-text;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          // padding: 8px 18px;
          cursor: pointer;
          background-color: @scrollListItem-color-default-default-bg;

          &.@{module-list}-item-sel {
            background: @scrollListItem-color-default-selected-bg;
            color: @scrollListItem-color-default-selected-text;
            > svg {
              width: 16px;
              height: 16px;
              margin-right: 12px;
            }
          }

          &:not(.disabled):not(.@{module-list}-item-disabled):not(.@{module-list}-item-sel):not(.@{module-list}-item-selected) {
            cursor: pointer;

            &:hover {
              background-color: @scrollListItem-color-default-hover-bg;
            }

            &:active {
            }
          }
          &.@{module-list}-item-disabled {
            color: @scrollListItem-color-default-disabled-text;
            cursor: not-allowed;
          }
        }
      }
    }

    .@{module-list}-item-wheel {
      position: relative;
      flex: 1;
      overflow: hidden;

      &:not(:last-child) {
        border-right: solid 1px @scrollList-color-default-default-border;
      }

      .@{module-list}-list-outer ul > li.@{module-list}-item-selected {
        font-weight: 500;
        color: @color-text-icon-0;
      }

      .@{module-list}-list-outer {
        position: relative;
        overflow-x: hidden;
        overflow-y: auto;
        height: 100%;
        width: 100%;
        padding-right: 18px;
        box-sizing: content-box;
      }

      .@{module-list}-shade {
        width: 100%;
        height: 50%;
        pointer-events: none;
        position: absolute;

        &-pre {
          top: 0;
          margin-top: -(@scroll-list-item-height / 2 + 1px);

          opacity: 0.5;
        }

        &-post {
          top: 50%;
          margin-top: @scroll-list-item-height / 2 + 1px;

          opacity: 0.5;
        }
      }

      .@{module-list}-selector {
        pointer-events: none;
        position: absolute;
        top: 50%;
        // border-top: solid 1px @scrollList-color-default-default-border;
        // border-bottom: solid 1px @scrollList-color-default-default-border;
        background: @color-primary-bright;
        height: @scroll-list-item-height;
        width: 100%;
        transform: translateY(-50%);
      }
    }
  }
  .@{module-list}-footer {
    padding: 10px;
  }
  .@{module-list}-line {
    background: @scrollList-color-default-default-border;
    height: 1px;
  }
}

.@{prefix}-rtl,
.@{prefix}-portal-rtl {
  .@{module-list} {
    direction: rtl;

    &-body {
      .@{module-list}-item {
        &:not(:last-child) {
          border-right: 0;
          border-left: solid 1px @scrollList-color-default-default-border;
        }
      }
      .@{module-list}-item,
      .@{module-list}-item-wheel .@{module-list}-list-outer {
        & > ul {
          & > li {
            &.@{module-list}-item-sel {
              > svg {
                margin-right: 0;
                margin-left: 12px;
              }
            }
          }
        }
      }

      .@{module-list}-item-wheel {
        &:not(:last-child) {
          border-right: 0;
          border-left: solid 1px @scrollList-color-default-default-border;
        }

        .@{module-list}-list-outer {
          padding-right: 0;
          padding-left: @scroll-list-item-height / 2;
        }
      }
    }
  }
}

.@{module}-panel {
  .@{module-list}-item,
  .@{module-list}-item-wheel {
    flex: none;
  }

  &-list {
    &-ampm {
      width: 80px;
    }

    &-hour {
      width: 80px;
    }

    &-minute {
      width: 80px;
    }

    &-second {
      width: 80px;
    }
  }
}

.@{module}-lists {
  display: flex;

  & > .@{module-list}:not(:last-child) {
    border-right: 1px solid @scrollList-color-default-default-border;
  }
}