// Button component - Shadcn inspired with semantic variants

/**
 * @section Button Base
 */

/** @public Base button - apply this first, then add variant */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  white-space: nowrap;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: all var(--transition-base);
  cursor: pointer;
  border: 1px solid transparent;
  padding: var(--spacing-2) var(--spacing-4);
  height: 2.5rem;
  line-height: 1;

  &:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
  }

  &:disabled {
    pointer-events: none;
    opacity: 0.5;
  }

  // Icon alignment modifiers
  &.btn-icon-start {
    flex-direction: row;
    i, .icon {
      margin-right: var(--spacing-1);
    }
  }

  &.btn-icon-end {
    flex-direction: row-reverse;
    i, .icon {
      margin-left: var(--spacing-1);
    }
  }

  &.btn-icon {
    i, .icon {
      margin: 0;
    }
  }
}

/**
 * @section Button Variants
 */

/** @public Primary action button - filled with brand color */
.btn-default {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));

  &:hover {
    background-color: hsl(var(--primary) / 0.9);
  }
}

/** @public Alias for btn-default (v1 compatibility) */
.btn-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));

  &:hover {
    background-color: hsl(var(--primary) / 0.9);
  }
}

/** @public Secondary action button - light fill */
.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));

  &:hover {
    background-color: hsl(var(--secondary) / 0.8);
  }
}

/** @public Destructive action button - delete/danger (red) */
.btn-destructive {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));

  &:hover {
    background-color: hsl(var(--destructive) / 0.9);
  }
}

/** @public Outlined border button */
.btn-outline {
  border: 1px solid hsl(var(--border));
  background-color: transparent;
  color: hsl(var(--foreground));

  &:hover {
    background-color: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
  }
}

/** @public Transparent button with subtle hover */
.btn-ghost {
  background-color: transparent;
  color: hsl(var(--foreground));

  &:hover {
    background-color: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
  }
}

/** @public Transparent default, muted hover, primary when active - perfect for navigation/tabs/filters */
.btn-subtle {
  background-color: transparent;
  color: hsl(var(--foreground));
  border: 1px solid transparent;
  height: auto;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--text-sm);

  &:hover {
    background-color: hsl(var(--muted));
  }

  &.active,
  &:active {
    color: hsl(var(--primary-foreground));
    background-color: hsl(var(--primary));
  }

  // Override sm size for subtle to keep compact
  &.btn-sm {
    height: auto;
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--text-sm);
  }
}

/** @public Text link style button with underline */
.btn-link {
  background-color: transparent;
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 4px;

  &:hover {
    text-decoration: none;
  }
}

/** @public Accent-colored link with underline (not a button) */
.link {
  background-color: transparent;
  color: hsl(var(--accent));
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: all var(--transition-base);

  &:hover {
    color: hsl(var(--accent) / 0.8);
    text-decoration: none;
  }
}

/**
 * @section Button Sizes
 */

/** @public Small button (2rem height) */
.btn-sm {
  height: 2rem;
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--text-xs);
}

/** @public Large button (3rem height) */
.btn-lg {
  height: 3rem;
  padding: var(--spacing-3) var(--spacing-6);
  font-size: var(--text-base);
}

/** @public Square icon button (2.5rem × 2.5rem) */
.btn-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  
  // Only extend ghost if no variant is specified
  &:not(.btn-subtle):not(.btn-default):not(.btn-primary):not(.btn-secondary):not(.btn-destructive):not(.btn-outline) {
    &:extend(.btn-ghost all);
  }
}

/** @public Small square icon button (2rem × 2rem) */
.btn-icon-sm {
  width: 2rem;
  height: 2rem;
  padding: 0;
}

/** @public Large square icon button (3rem × 3rem) */
.btn-icon-lg {
  width: 3rem;
  height: 3rem;
  padding: 0;
}

/**
 * @section Special Attention Variants
 */

/** @public Gold shimmer gradient button with animation */
.btn-golden {
  background: linear-gradient(135deg, 
    hsl(43 80% 53%) 0%,
    hsl(36 90% 62%) 50%,
    hsl(43 80% 53%) 100%
  );
  color: hsl(var(--golden-foreground));
  box-shadow: 0 2px 8px hsla(43 80% 53% / 0.4);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px hsla(43 80% 53% / 0.5);
  }
}

/** @public Yellow highlight gradient button with animation */
.btn-attention {
  background: linear-gradient(135deg,
    hsl(45 93% 47%) 0%,
    hsl(48 95% 53%) 50%,
    hsl(45 93% 47%) 100%
  );
  color: hsl(var(--attention-foreground));
  box-shadow: 0 2px 8px hsla(45 93% 47% / 0.4);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px hsla(45 93% 47% / 0.5);
  }
}

/** @public Purple highlight gradient button with animation */
.btn-attention-violet {
  background: linear-gradient(135deg,
    hsl(267 76% 57%) 0%,
    hsl(280 84% 65%) 50%,
    hsl(267 76% 57%) 100%
  );
  color: hsl(var(--attention-violet-foreground));
  box-shadow: 0 2px 8px hsla(267 76% 57% / 0.4);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px hsla(267 76% 57% / 0.5);
  }
}

/** @public Red highlight gradient button with animation */
.btn-attention-red {
  background: linear-gradient(135deg,
    hsl(0 84% 60%) 0%,
    hsl(350 89% 65%) 50%,
    hsl(0 84% 60%) 100%
  );
  color: hsl(var(--attention-red-foreground));
  box-shadow: 0 2px 8px hsla(0 84% 60% / 0.4);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px hsla(0 84% 60% / 0.5);
  }
}

/** @public Muted dashed button (de-emphasized) */
.btn-not-attention {
  background: linear-gradient(135deg,
    hsl(var(--muted)) 0%,
    hsl(var(--muted) / 0.8) 50%,
    hsl(var(--muted)) 100%
  );
  color: hsl(var(--muted-foreground));
  border: 1px dashed hsl(var(--border));
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;

  &:hover {
    border-style: solid;
  }
}

// Animation for gradient buttons
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/**
 * @section Button States
 */

/** @public Disabled button state */
.btn-disabled,
.btn[disabled] {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  cursor: not-allowed;
  pointer-events: none;
  border: 1px solid hsl(var(--border));
  box-shadow: none;
  animation: none;
  
  &:hover, &:focus {
    transform: none;
    box-shadow: none;
  }

  // Ensure gradient variants don't show through
  &.btn-golden,
  &.btn-attention,
  &.btn-attention-violet,
  &.btn-attention-red,
  &.btn-not-attention {
    background: hsl(var(--muted));
    animation: none;
  }
}

/** @public Loading state with spinner animation */
.btn-loading {
  position: relative;
  cursor: wait;
  pointer-events: none;

  // Hide button content while loading
  > * {
    visibility: hidden;
  }

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: inherit;
  }

  &::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    margin-left: -0.5rem;
    margin-top: -0.5rem;
    border: 2px solid;
    border-radius: 50%;
    border-right-color: transparent;
    animation: button-loading-spinner 0.75s linear infinite;
  }

  // Variant-specific loading styles
  &.btn-default,
  &.btn-primary {
    &::after {
      border-color: hsl(var(--primary-foreground));
      border-right-color: transparent;
    }
  }

  &.btn-secondary {
    &::after {
      border-color: hsl(var(--secondary-foreground));
      border-right-color: transparent;
    }
  }

  &.btn-destructive {
    &::after {
      border-color: hsl(var(--destructive-foreground));
      border-right-color: transparent;
    }
  }

  &.btn-outline,
  &.btn-ghost {
    &::after {
      border-color: hsl(var(--foreground));
      border-right-color: transparent;
    }
  }

  &.btn-link {
    &::after {
      border-color: hsl(var(--primary));
      border-right-color: transparent;
    }
  }
}

// Spinner animation for loading state
@keyframes button-loading-spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/**
 * @section Button Modifiers
 */

/** @public Full width button */
.btn-block {
  width: 100%;
}