/**
 * PisellHierarchicalSummaryList 组件样式
 * 布局与结构在此定义；行内文案/颜色/字重等可由 levelConfig（labelTextStyle / valueTextStyle / metaTextStyle）
 * 通过 Row 内联样式覆盖，便于上层 1:1 复刻设计稿。
 */

@prefix: pisell-hierarchical-summary-list;

.@{prefix} {
  width: 100%;
  background: #fff;
  padding: 20px;

  /* 标题栏（L1/L2）上下 20px，展开后下边距 16px，由 Row 内联 style 控制 */

  &-node {
    &:first-child {
      margin-top: 0 !important;
    }
  }

  &-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }

  &-row-expandable {
    cursor: pointer;
  }

  &-row-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
  }

  /* 默认样式，可由 levelConfig.labelTextStyle 覆盖；flex: 0 0 auto 使 itemsCount 紧挨标题左侧而非靠右 */

  &-row-label {
    flex: 0 0 auto;
    min-width: 0;
    color: #1b1b1b;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    white-space: normal;
    word-break: break-word;
  }

  &-row-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }

  /* 默认样式，可由 levelConfig.metaTextStyle 覆盖；itemsCount 等 meta 文案颜色 #667085 */

  &-row-dot,
  &-row-items-count,
  &-row-info {
    color: #667085;
    font-size: 16px;
    line-height: 24px;
  }

  &-row-items-count {
    font-weight: 400;
    white-space: nowrap;
  }

  /* 子项列表左侧圆点（level 3+），颜色与 meta 一致 */

  &-row-bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 24px;
  }

  &-row-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  &-row-right {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* 默认样式，可由 levelConfig.valueTextStyle 覆盖 */

  &-row-value {
    color: #1b1b1b;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
  }

  &-row-extra {
    display: inline-flex;
    align-items: center;
  }

  &-row-expand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
  }

  &-children {
    width: 100%;
  }
}