@use "../variables" as *;

.copy-button {
  position: relative;
  width: 100%;
  padding: $spacing-md $spacing-xl;
  border: none;
  border-radius: $border-radius-md;
  cursor: pointer;
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: $spacing-sm;
  font-size: $font-size-md;
  font-weight: 500;

  &:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  // 背景动画层
  .button-background {
    position: absolute;
    inset: 0;
    background: var(--button-bg-disabled);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--button-bg-enabled);
      opacity: 0;
      transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
  }

  &.enabled .button-background::before {
    opacity: 1;
  }

  // 内容布局
  .button-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: $spacing-sm;
    color: var(--button-text-disabled);
    font-weight: 500;
    transition:
      transform 0.2s ease,
      color 0.3s ease;
  }

  &:hover .button-content {
    transform: translateY(-1px);
  }

  &.enabled .button-content {
    color: var(--button-text-enabled);
  }

  // 图标包装器
  .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);

    svg {
      color: currentColor;
    }
  }

  // 光效
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(255, 255, 255, 0.1) 0%,
      transparent 60%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &:hover::after {
    opacity: 1;
  }

  // 涟漪效果
  &:active::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(255, 255, 255, 0.2) 0%,
      transparent 60%
    );
    animation: ripple 0.6s ease-out;
  }
}

@keyframes ripple {
  from {
    transform: scale(0);
    opacity: 1;
  }
  to {
    transform: scale(2);
    opacity: 0;
  }
}
