.yc-list-wrapper {
  position: relative;
  width: 100%;

  .yc-list-spin {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
    .yc-scrollbar {
      width: 100%;
      .yc-scrollbar-container {
        .yc-scrollbar-content {
          border-radius: var(--border-radius-medium);
        }
      }
    }
    .yc-list-content-wrapper {
      display: flex;
      flex-direction: column;
      color: var(--color-text-1);
      font-size: 14px;
      line-height: 1.5715;
      .yc-list-header {
        font-weight: 500;
        font-size: 16px;
        line-height: 1.5;
        color: var(--color-text-1);
      }
      .yc-list-content {
        display: flex;
        flex-direction: column;
      }
      .yc-list-scroll-loading {
        background-color: var(--color-bg-1);
        .yc-list-item-content {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
// bordered
.yc-list-bordered {
  .yc-scrollbar {
    .yc-scrollbar-container {
      border: 1px solid var(--color-border);
    }
  }
}
.yc-list-split {
  .yc-list-header {
    border-bottom: 1px solid var(--color-border);
  }
  .yc-list-content {
    .yc-list-item {
      &:not(:last-child) {
        border-bottom: 1px solid var(--color-border);
      }
    }
  }
  .yc-list-scroll-loading {
    border-top: 1px solid var(--color-border);
  }
  .yc-list-footer {
    border-top: 1px solid var(--color-border);
  }
}
// hoverable
.yc-list-hoverable {
  .yc-list-item {
    &:hover {
      background-color: var(--color-fill-1);
    }
  }
}
//size
@size: {
  @small: {
    header-padding: 8px 20px;
    item-padding: 9px 20px;
  };
  @medium: {
    header-padding: 12px 20px;
    item-padding: 13px 20px;
  };
  @large: {
    header-padding: 16px 20px;
    item-padding: 17px 20px;
  };
};
each(@size, .(@value,@name){
    @key:replace(~"@{name}", "@", "");
    .yc-list-size-@{key} {
     .yc-list-header,.yc-list-footer,.yc-list-scroll-loading{
      padding: @value[header-padding];
     }
     .yc-list-item{
      padding: @value[item-padding];
     }
    }
  });
