/* 头部Tab栏样式 */

.pisell-list-header {
  padding: 0;

  &.pisell-list-header-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    /* 毛玻璃效果 */
    background: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #D0D5DD;
    padding-bottom: 12px;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    /* 平滑过渡效果 */
    transition: box-shadow 0.2s ease, backdrop-filter 0.2s ease, background 0.2s ease;
    overflow: visible !important;

    /* 当sticky生效时的增强视觉效果 */
    &::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    /* 滚动时激活视觉效果 */
    &.sticky-active::after {
      opacity: 1;
    }
  }

  .pisell-list-tabs {
    &.pisell-list-tabs-anchor,
    &.pisell-list-tabs-switch {
      /* 自定义Tab样式已经在Tab组件中定义，这里保持干净 */
      position: relative;
    }
  }

}

/* 垂直排版时header在内部的样式 */
.list-content-vertical {
  .pisell-list-header {
    flex-shrink: 0; /* 防止被压缩 */
    margin-bottom: 0; /* 去除默认间距 */

    /* sticky 效果：相对于 list-content 滚动容器 */
    &.pisell-list-header-sticky {
      position: sticky;
      top: 0;
      z-index: 10;
      /* 毛玻璃效果 */
      background: transparent;
      backdrop-filter: blur(12px);
      padding: 0;
      box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
      transition: box-shadow 0.2s ease, backdrop-filter 0.2s ease, background 0.2s ease;
      border: none;
    }

  }
}