// ============================================================
// Buttons Component
// .cyber-btn with variants and effects
// ============================================================

@layer components {
  .cyber-btn {
    // Custom properties for easy theming
    --btn-color: var(--cyber-cyan-500);
    --btn-bg: transparent;
    --btn-glow: var(--glow-cyan);

    // Position & Display
    position: relative;
    display: inline-flex;
    gap: var(--space-xs);
    align-items: center;
    justify-content: center;

    // Box Model
    padding: var(--space-xs) var(--space-md);
    border: var(--border-medium) solid var(--btn-color);
    border-radius: var(--radius-cyber);
    overflow: hidden;

    // Typography
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    // Visual
    color: var(--btn-color);
    background: var(--btn-bg);

    // Animation - specific properties for better performance
    transition:
      color var(--duration-fast) var(--ease-cyber),
      background-color var(--duration-fast) var(--ease-cyber),
      border-color var(--duration-fast) var(--ease-cyber),
      box-shadow var(--duration-fast) var(--ease-cyber);
    cursor: pointer;
    isolation: isolate;

    // Hover fill animation - slides in from left
    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      background: var(--btn-color);
      transform: translateX(-101%);
      transition: transform var(--duration-normal) var(--ease-cyber);
      inset: 0;
    }

    &:hover::before,
    &:focus-visible::before {
      transform: translateX(0);
    }

    // Hover and focus states
    &:hover,
    &:focus-visible {
      color: var(--cyber-void-500);
      box-shadow: var(--btn-glow);
    }

    // Cyber corner cut-off triangle effect
    &::after {
      content: "";
      position: absolute;
      right: -2px;
      bottom: -2px;
      width: 12px;
      height: 12px;
      border: var(--border-medium) solid var(--btn-color);
      border-top: none;
      border-left: none;
      background: var(--color-bg-primary);
      clip-path: polygon(100% 0, 100% 100%, 0 100%);
    }

    // Focus visible outline
    &:focus-visible {
      outline: 2px solid var(--btn-color);
      outline-offset: 4px;
    }

    // Disabled state
    &:disabled,
    &[disabled] {
      opacity: 40%;
      cursor: not-allowed;
      pointer-events: none;
      filter: grayscale(50%);
    }

    // Touch devices: disable hover fill effect to prevent stuck states
    @media (hover: none) {
      &::before {
        display: none;
      }

      &:hover {
        color: var(--btn-color);
        box-shadow: none;
      }

      &:active {
        color: var(--cyber-void-500);
        background: var(--btn-color);
        box-shadow: var(--btn-glow);
      }
    }

    // --------------------------------------------------------
    // Color Variants
    // --------------------------------------------------------

    &--magenta {
      --btn-color: var(--cyber-magenta-500);
      --btn-glow: var(--glow-magenta);
    }

    &--yellow {
      --btn-color: var(--cyber-yellow-500);
      --btn-glow: var(--glow-yellow);
    }

    &--green {
      --btn-color: var(--cyber-green-500);
      --btn-glow: var(--glow-green);
    }

    // --------------------------------------------------------
    // Style Variants
    // --------------------------------------------------------

    &--ghost {
      border-style: dashed;
    }

    &--filled {
      color: var(--cyber-void-500);
      background: var(--btn-color);

      &::before {
        background: var(--cyber-void-500);
      }

      &:hover {
        color: var(--btn-color);
      }
    }

    // --------------------------------------------------------
    // Size Variants
    // --------------------------------------------------------

    &--sm {
      padding: var(--space-3xs) var(--space-sm);
      font-size: var(--text-xs);
    }

    &--lg {
      padding: var(--space-sm) var(--space-lg);
      font-size: var(--text-lg);
    }
  }

  // Reduced motion support
  @media (prefers-reduced-motion: reduce) {
    .cyber-btn {
      &::before {
        transition: none;
      }
    }
  }
}