@use '@style/theme/index.scss' as theme;
@use 'sass:string';
@use 'sass:map';
@use 'sass:meta';
@use '@components/list/style/token.scss' as token;
@use '@components/list/style/token.scss' as *;

$list-prefix-cls: string.unquote('#{theme.$prefix}-list');

@function token-var($name, $fallback: null) {
  $value: map.get(meta.module-variables('token'), $name);

  @if $value == null {
    @return $fallback;
  }

  @return $value;
}

.#{$list-prefix-cls} {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  overflow-y: auto;
  color: $list-color-text;
  font-size: $list-font-size;
  line-height: $list-line-height;
  border-radius: $list-border-radius;

  &-wrapper {
    overflow: hidden;

    .#{$list-prefix-cls}-spin {
      display: block;
      height: 100%;
      overflow: hidden;
    }
  }

  &-content {
    overflow: hidden;
  }

  @mixin size($size) {
    &-#{$size} {
      $ref-padding-vertical-header: string.unquote('list-size-#{$size}-padding-vertical-header');
      $ref-padding-horizontal-header: string.unquote(
        'list-size-#{$size}-padding-horizontal-header'
      );
      $ref-padding-vertical-item: string.unquote('list-size-#{$size}-padding-vertical-item');
      $ref-padding-horizontal-item: string.unquote('list-size-#{$size}-padding-horizontal-item');

      .#{$list-prefix-cls}-content-wrapper .#{$list-prefix-cls}-header {
        padding: token-var($ref-padding-vertical-header) token-var($ref-padding-horizontal-header);
      }

      // 在存在列表嵌套的时候，通过 > 限定 size 仅对其直接子元素生效，避免影响被嵌套的列表的样式
      .#{$list-prefix-cls}-content-wrapper .#{$list-prefix-cls}-footer,
      .#{$list-prefix-cls}-content-wrapper .#{$list-prefix-cls}-content > .#{$list-prefix-cls}-item,
      .#{$list-prefix-cls}-content-wrapper
        .#{$list-prefix-cls}-content
        .#{$list-prefix-cls}-col
        > .#{$list-prefix-cls}-item,
      .#{$list-prefix-cls}-content-wrapper
        .#{$list-prefix-cls}-content.#{$list-prefix-cls}-virtual
        .#{$list-prefix-cls}-item {
        padding: token-var($ref-padding-vertical-item) token-var($ref-padding-horizontal-item);
      }
    }
  }

  @mixin border() {
    &-bordered {
      border: $list-border-width solid $list-border-color;
    }
  }

  @mixin split() {
    &-split &-header,
    &-split &-item:not(:last-child) {
      border-bottom: $list-border-width solid $list-border-color;
    }

    &-split &-footer {
      border-top: $list-border-width solid $list-border-color;
    }
  }

  @include size(small);
  @include size(medium);
  @include size(large);
  @include border();
  @include split();

  &-header {
    color: $list-color-text-header;
    font-weight: $list-font-weight-header;
    font-size: $list-font-size-header;
    line-height: $list-line-height-header;
  }

  &-item {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;

    &-main {
      flex: 1;
      overflow: hidden;

      .#{$list-prefix-cls}-item-action:not(:first-child) {
        margin-top: $list-action-margin-top;
      }
    }

    &-meta {
      display: flex;
      align-items: center;
      padding: $list-meta-padding-vertical $list-meta-padding-horizontal;

      &-avatar {
        display: flex;

        &:not(:last-child) {
          margin-right: $list-meta-margin-right-avatar;
        }
      }

      &-title {
        color: $list-meta-color-title;
        font-weight: $list-meta-font-weight-title;

        &:not(:last-child) {
          margin-bottom: $list-meta-margin-bottom-title;
        }
      }

      &-content {
        flex-grow: 1;
        overflow: hidden;
      }

      &-description {
        color: $list-mete-color-description;
      }
    }

    &-action {
      display: flex;
      flex-wrap: nowrap;
      align-self: center;
      margin: 0;
      padding: 0;
      list-style: none;

      > li {
        display: inline-block;
        cursor: pointer;

        &:not(:last-child) {
          margin-right: $list-action-gap;
        }
      }
    }
  }

  &-hover &-item:hover {
    background-color: $list-color-bg-item-hover;
  }

  &-pagination {
    float: right;
    margin-top: $list-pagination-margin-top;

    &::after {
      display: block;
      clear: both;
      height: 0;
      overflow: hidden;
      visibility: hidden;
      content: '';
    }
  }

  &-scroll-loading {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-content {
    flex: auto;

    .#{theme.$prefix}-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
  }
}