.scrollable-list {
  /* 隐藏滚动条的样式 */
  &-hide-scrollbar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 和 Edge */
    scroll-behavior: smooth; /* 平滑滚动 */

    &::-webkit-scrollbar {
      display: none; /* Chrome, Safari 和 Opera */
    }
  }

  /* 渐变动画 */
  &-gradient-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }

  &-gradient-fade-out {
    animation: fadeOut 0.3s ease-in-out;
  }

  /* 多列布局样式 */
  &-multi-column-container {
    display: grid;
    gap: 16px; /* 默认间距 */

    /* 单列布局 */
    &.scrollable-list-single-column {
      grid-template-columns: 1fr;
    }

    /* 两列布局 */
    &.scrollable-list-two-column {
      grid-template-columns: repeat(2, 1fr);
    }

    /* 三列布局 */
    &.scrollable-list-three-column {
      grid-template-columns: repeat(3, 1fr);
    }

    /* 四列布局 */
    &.scrollable-list-four-column {
      grid-template-columns: repeat(4, 1fr);
    }

    /* 五列布局 */
    &.scrollable-list-five-column {
      grid-template-columns: repeat(5, 1fr);
    }

    /* 六列布局 */
    &.scrollable-list-six-column {
      grid-template-columns: repeat(6, 1fr);
    }

    /* 自适应列布局 */
    &.scrollable-list-auto-column {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* 响应式布局支持 */
@media (max-width: 768px) {
  .scrollable-list-multi-column-container:not(.scrollable-list-single-column) {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 480px) {
  .scrollable-list-multi-column-container:not(.scrollable-list-single-column) {
    grid-template-columns: 1fr;
  }
}
