hikari-components 0.3.10

// Use theme variables with namespace to avoid conflicts
@use '../../../../theme/styles/variables.scss' as vars;
@use '../../../../theme/styles/mixins.scss' as mix;
@use './button-vars.scss' as button-vars;

// ============================================
// Hikari Button Component
// Features: Subtle rounded corners, glow effects (via Glow wrapper)
// Three-layer CSS variable system:
// - Layer1: Foundation variables (foundation.scss)
// - Layer2: Component variables (button-vars.scss)
// - Custom: Runtime overrides via AnimationBuilder
//
// NOTE: Hover effects are handled by Glow wrapper, not here
// ============================================

// Base button styles
.hi-button {
  // Layout
  display: inline-flex;
  align-items: center;
  justify-content: center;

  // Spacing - use CSS variables
  padding: var(--hi-button-padding-y) var(--hi-button-padding-x);
  margin: 0;
  gap: var(--hi-button-gap);

  // Typography - use CSS variables
  font-family: vars.$hikari-font-family-sans;
  font-size: var(--hi-button-font-size);
  font-weight: var(--hi-button-font-weight);
  line-height: var(--hi-button-line-height);
  letter-spacing: var(--hi-button-letter-spacing);
  color: var(--hi-button-text-color);

  // Appearance - use CSS variables
  border-radius: var(--hi-button-radius);
  border: var(--hi-button-border-width) var(--hi-button-border-style) var(--hi-button-border-color);

  // Cursor & interaction
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  outline: none;

  // Transitions - use CSS variables
  transition: var(--hi-button-transition);

  // Position for pseudo-elements
  position: relative;
  overflow: hidden;

  // Background - use CSS variables
  background-color: var(--hi-button-bg);
  backdrop-filter: var(--hi-button-bg-blur);

  // No transform - controlled by AnimationBuilder via Glow wrapper

  // Focus state - only outline, no color changes
  &:focus-visible {
    border-color: var(--hi-button-border-color-focus);
    border-width: var(--hi-button-border-width-focus);
    outline: none;
    color: var(--hi-button-text-color);
    
    .hikari-icon {
      color: var(--hi-button-icon-color);
    }
  }

  // Disabled state
  &:disabled {
    color: var(--hi-button-text-color-disabled);
    background-color: var(--hi-button-bg-disabled);
    border-color: var(--hi-button-border-color-disabled);
    cursor: not-allowed;
    pointer-events: none;
  }

  // Loading state
  &.hi-button-loading {
    pointer-events: none;
  }
}

// ============================================
// Variant: Primary
// ============================================

.hi-button-primary {
  background: var(--hi-button-bg);
  color: var(--hi-button-text-color);
  border-color: var(--hi-button-border-color);
}

// ============================================
// Variant: Secondary
// ============================================

.hi-button-secondary {
  background: var(--hi-button-bg);
  color: var(--hi-button-text-color);
  border-color: var(--hi-button-border-color);
}

// ============================================
// Variant: Ghost
// ============================================

.hi-button-ghost {
  background-color: var(--hi-button-bg);
  color: var(--hi-button-text-color);
  border-color: var(--hi-button-border-color);
}

// ============================================
// Variant: Borderless
// ============================================

.hi-button-borderless {
  background-color: var(--hi-button-bg);
  color: var(--hi-button-text-color);
  border: none;
}

// ============================================
// Variant: Danger
// ============================================

.hi-button-danger {
  background: var(--hi-button-bg);
  color: var(--hi-button-text-color);
  border-color: var(--hi-button-border-color);
}

// ============================================
// Variant: Success
// ============================================

.hi-button-success {
  background: var(--hi-button-bg);
  color: var(--hi-button-text-color);
  border-color: var(--hi-button-border-color);
}

// ============================================
// Size Variants - Use CSS Variables
// ============================================

.hi-button-sm,
.hi-button-md,
.hi-button-lg {
  // Variables already defined in button-vars.scss
}

// ============================================
// Block Variant
// ============================================

.hi-button-block {
  display: flex;
  width: 100%;
}

// ============================================
// Loading Spinner
// ============================================

.hi-button-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: hi-spin 0.6s linear infinite;
  opacity: 0.9;
}

// ============================================
// Icon styling - Use CSS Variables
// ============================================

button.hi-button .hikari-icon {
  color: var(--hi-button-icon-color);
  fill: var(--hi-button-icon-fill);
  opacity: var(--hi-button-icon-fill-opacity);
}

button.hi-button:active .hikari-icon {
  color: var(--hi-button-icon-color-active);
}

button.hi-button:disabled .hikari-icon {
  color: var(--hi-button-icon-color-disabled);
}

// SVG elements inherit color from parent
button .hikari-icon svg,
button .hikari-icon svg path,
button .hikari-icon svg circle,
button .hikari-icon svg rect,
button .hikari-icon svg ellipse,
button .hikari-icon svg polygon,
button .hikari-icon svg polyline,
button .hikari-icon svg line {
  color: inherit;
}

// ============================================
// Icon and Suffix wrappers - Use CSS Variables
// ============================================

button.hi-button:not(.hi-icon-button) {
  .hi-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--hi-button-icon-size);
    height: var(--hi-button-icon-size);

    .hikari-icon {
      width: var(--hi-button-icon-size);
      height: var(--hi-button-icon-size);
    }

    .hikari-icon svg {
      width: var(--hi-button-icon-size);
      height: var(--hi-button-icon-size);
    }
  }

  .hi-button-suffix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    .hi-arrow {
      width: var(--hi-button-icon-size);
      height: var(--hi-button-icon-size);
    }

    .hi-arrow svg {
      width: var(--hi-button-icon-size);
      height: var(--hi-button-icon-size);
    }

    .hikari-icon {
      width: var(--hi-button-icon-size);
      height: var(--hi-button-icon-size);
    }

    .hikari-icon svg {
      width: var(--hi-button-icon-size);
      height: var(--hi-button-icon-size);
    }
  }
}

// ============================================
// Space-between layout (icon + text + suffix)
// ============================================

button.hi-button-space-between {
  justify-content: space-between;

  > *:not(.hi-button-icon):not(.hi-button-suffix) {
    flex: 1;
    text-align: center;
    line-height: var(--hi-button-line-height);
  }

  .hi-button-icon,
  .hi-button-suffix {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
}

// ============================================
// Button width variants
// ============================================

.hi-button-width-auto {
  width: auto;
}

.hi-button-width-120 {
  width: 120px;
}

.hi-button-width-140 {
  width: 140px;
}

.hi-button-width-160 {
  width: 160px;
}

// ============================================
// Animation Keyframes
// ============================================

@keyframes hi-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}