// ========== 颜色配置 ==========
$icon-color-black: #000;
$icon-color-gray: #808080;
$icon-color-pressed: #666;

// ========== 样式定义 ==========
.update-btn {
  // Default icon color: black
  .div-btn__icon {
    color: $icon-color-black !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    
    svg {
      width: 100%;
      height: 100%;
    }
  }

  // Pressed state: darker color
  .div-btn--pressed:not(.div-btn--disabled) .div-btn__icon {
    color: $icon-color-pressed !important;
    opacity: 1 !important;
  }

  &--loading {
    cursor: wait;
    
    // Hide all icon layers except default
    .div-btn__icon--hover,
    .div-btn__icon--pressed,
    .div-btn__icon--disabled {
      opacity: 0 !important;
    }
    
    .div-btn__icon--default {
      opacity: 1 !important;
      // Loading icon color: gray
      color: $icon-color-gray !important;
      
      // Rotate loading icon
      svg {
        animation: update-btn-spin 0.5s linear infinite;
        transform-origin: center;
      }
      
      // Animate loading circle stroke
      svg circle:last-child {
        animation: update-btn-loading 1s linear infinite;
      }
    }
  }
}

// ========== 动画定义 ==========
@keyframes update-btn-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes update-btn-loading {
  0% {
    stroke-dashoffset: 47.124;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -47.124;
  }
}
