// MultilevelCard 组件样式

.multilevel-card {
  position: relative;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;

  // 主卡片区域
  &__card {
    position: relative;
  }

  // 次级面板区域
  .multilevel-card-panel {
    position: relative;
    overflow: hidden;
    max-height: 0;
    opacity: 0;

    // 可见状态
    &--visible {
      max-height: 2000px; // 足够大的值，确保内容完全展示
      opacity: 1;
    }

    // 隐藏状态
    &--hidden {
      max-height: 0;
      opacity: 0;
    }
  }

  // Click 模式
  &--click {
    .multilevel-card__card {
      cursor: pointer;
    }
  }

  // Hover 模式
  &--hover {
    .multilevel-card__card {
      cursor: pointer;
    }
  }

  // 展开状态
  &--expanded {
    // 可以在这里添加展开状态下的样式
  }
}
