@keyframes rippleEffect {
  0% {
    background-color: darken(#f5ebe0, 10%);
    transform: scale(1);
  }
  100% {
    background-color: #f5ebe0;
    transform: scale(1.5);
  }
}

ion-item {
  --background: #d6ccc2;
  --color: black;
  --min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: color 0.3s ease;
  position: relative;
  overflow: hidden;
  font-family: "Poppins", sans-serif; /* 使用 Poppins 字体 */

  &.clicked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: darken(#d6ccc2, 10%);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: rippleEffect 0.6s forwards;
  }

  &.loading {
    pointer-events: none; /* 禁止交互 */
  }

  &:hover,
  &:active {
    --color: #d6ccc2;
  }

  .card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 图标和文字之间的间距 */
  }

  ion-icon {
    font-size: 24px; /* Adjust icon size as needed */
  }

  .card-label {
    font-size: 14px; /* Adjust text size as needed */
    line-height: 1.5;
  }

  ion-spinner {
    margin-top: 8px;
  }
}
