/**
 * TouchRipple 组件样式 - 对应 MUI TouchRipple
 * 使用 CSS @keyframes 实现涟漪动画
 */

/* 涟漪容器 */
.MuiTouchRipple-root {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

/* 涟漪基础样式 */
.MuiTouchRipple-ripple {
  position: absolute;
  border-radius: 50%;
  background-color: var(--ripple-color, currentColor);
  opacity: 0;
  transform: scale(0);
}

/* 涟漪可见状态 */
.MuiTouchRipple-rippleVisible {
  opacity: 0.3;
  transform: scale(1);
  animation: MuiTouchRipple-enter 550ms ease-out;
}

/* 涟漪子元素 */
.MuiTouchRipple-child {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 1;
}

/* 涟漪离开状态 */
.MuiTouchRipple-childLeaving {
  animation: MuiTouchRipple-exit 550ms ease-out;
  opacity: 0;
}

/* 涟漪脉冲状态 */
.MuiTouchRipple-ripplePulsate {
  animation-duration: 200ms;
}

.MuiTouchRipple-childPulsate {
  animation: MuiTouchRipple-pulsate 2500ms ease-in-out 200ms infinite;
}

/* =============================================
 * 涟漪动画关键帧 - 对应 MUI 涟漪动画
 * ============================================= */

/* 进入动画 */
@keyframes MuiTouchRipple-enter {
  0% {
    transform: scale(0);
    opacity: 0.1;
  }
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
}

/* 退出动画 */
@keyframes MuiTouchRipple-exit {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 脉冲动画 */
@keyframes MuiTouchRipple-pulsate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.92);
  }
  100% {
    transform: scale(1);
  }
}

/* =============================================
 * 按钮点击涟漪效果 - 简化实现
 * 通过 :active 伪类触发
 * ============================================= */

/* 按钮涟漪效果容器 */
.MuiButtonBase-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--ripple-color, rgba(255, 255, 255, 0.3));
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

/* 激活时的涟漪动画 */
.MuiButtonBase-root:active .MuiButtonBase-ripple {
  animation: ripple-effect 0.4s ease-out;
}

@keyframes ripple-effect {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

/* =============================================
 * 简单的点击反馈效果
 * ============================================= */

.MuiButtonBase-root {
  position: relative;
  overflow: hidden;
}

/* 点击时背景变化 */
.MuiButtonBase-root:active {
  opacity: 0.8;
}

/* 使用伪元素创建涟漪层 */
.MuiButtonBase-root::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  opacity: 0;
}

/* 激活时扩展涟漪 */
.MuiButtonBase-root:active::after {
  width: 200%;
  height: 200%;
  opacity: 0;
  animation: ripple-expand 0.4s ease-out;
}

@keyframes ripple-expand {
  0% {
    width: 0;
    height: 0;
    opacity: 0.4;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}