// ============================================================================
// 虚拟滚动卡片列表 - 组件基础样式
// 只包含组件自身的结构样式，视觉效果由使用方配置
// ============================================================================

// 滚动容器
.card-list-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

// 卡片网格
.card-list-grid {
  .cn-ui-list-pro-item--card--grid {
    border: none;
  }
}

// 卡片项基础结构
.card-item {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  user-select: none;
  position: relative;
  cursor: pointer;

  // 标题省略处理
  .cn-ui-list-pro-item__content {
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
  }

  .cn-ui-list-pro-item__content--details {
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
  }

  .cn-ui-list-pro-item__content--title {
    overflow: hidden;
    max-width: 100%;

    .cn-ui-ellipsis {
      display: block;
      overflow: hidden;
      max-width: 100%;
    }

    .cn-ui-ellipsis-header {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 360px;
    }
  }
}

// 卡片描述基础结构
.card-description {
  &-item {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    line-height: 20px;
    font-size: 14px;

    &-with-title {
      justify-content: flex-start;
      white-space: nowrap;
      overflow: hidden;
      min-width: 0;
    }
  }

  &-label {
    white-space: nowrap;
    flex-shrink: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 20px;
  }

  &-value {
    word-break: break-word;
    display: flex;
    align-items: center;

    &-with-title {
      flex: 0 0 auto;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: right;

      > .cn-ui-ellipsis {
        width: 100%;
      }
    }

    &-no-title {
      flex: 1;
      text-align: left;
      justify-content: flex-start;
    }
  }
}
