/* 悬浮滚动按钮样式 */

.list-scroll-float-button {
  pointer-events: none; /* 让容器不拦截点击事件 */

  /* 悬浮滚动按钮 */
  .scroll-down-button {
    pointer-events: auto; /* 恢复按钮的点击事件 */
    user-select: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* 悬浮暂停按钮 */
  .scroll-pause-button {
    pointer-events: auto; /* 恢复按钮的点击事件 */
    user-select: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* 添加淡入动画 */
  animation: fadeInUp 0.3s ease-out;
}

/* 垂直滚动模式：按钮在底部居中 */
.pisell-list-vertical {
  .list-scroll-float-button {
    /* 不设置容器的定位，让按钮通过内联样式自由定位 */

    .scroll-down-button {
      /* 悬停效果 - 垂直模式 */
      &:hover {
        transform: translateX(-50%) translateY(-2px) scale(1.05);
        box-shadow: 0px 8px 16px -4px rgba(16, 24, 40, 0.1);
        background: rgba(255, 255, 255, 0.85);
      }

      /* 按下效果 - 垂直模式 */
      &:active {
        transform: translateX(-50%) translateY(1px) scale(0.98);
        transition-duration: 0.1s;
      }
    }

    .scroll-pause-button {
      /* 悬停效果 - 垂直模式 */
      &:hover {
        transform: translateX(-50%) translateY(-2px) scale(1.05);
        box-shadow: 0px 8px 16px -4px rgba(16, 24, 40, 0.1);
        background: rgba(255, 255, 255, 0.85);
      }

      /* 按下效果 - 垂直模式 */
      &:active {
        transform: translateX(-50%) translateY(1px) scale(0.98);
        transition-duration: 0.1s;
      }
    }
  }
}

/* 水平滚动模式：按钮在右侧垂直居中 */
.pisell-list-horizontal {
  .list-scroll-float-button {
    /* 不设置容器的定位，让按钮通过内联样式自由定位 */

    .scroll-down-button {
      /* 悬停效果 - 水平模式 */
      &:hover {
        transform: translateY(-50%) translateX(-2px) scale(1.05);
        box-shadow: 0px 8px 16px -4px rgba(16, 24, 40, 0.1);
        background: rgba(255, 255, 255, 0.85);
      }

      /* 按下效果 - 水平模式 */
      &:active {
        transform: translateY(-50%) translateX(1px) scale(0.98);
        transition-duration: 0.1s;
      }
    }

    .scroll-pause-button {
      /* 悬停效果 - 水平模式 */
      &:hover {
        transform: translateY(-50%) translateX(-2px) scale(1.05);
        box-shadow: 0px 8px 16px -4px rgba(16, 24, 40, 0.1);
        background: rgba(255, 255, 255, 0.85);
      }

      /* 按下效果 - 水平模式 */
      &:active {
        transform: translateY(-50%) translateX(1px) scale(0.98);
        transition-duration: 0.1s;
      }
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}