/*
 * Atomic Design: Selection Base
 * =============================
 * Shared base styles for all selection components (chips, cards, buttons).
 * Provides consistent theming through CSS custom properties.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Selection Custom Properties (defaults)
 * Override these in component-specific contexts
 * ======================================== */

:root {
  /* Selection Colors */
  --selection-bg: var(--color-bg-secondary);
  --selection-bg-hover: var(--color-bg-tertiary);
  --selection-bg-selected: color-mix(in srgb, var(--selection-accent) 15%, var(--selection-bg));
  --selection-bg-pending: color-mix(in srgb, var(--selection-accent-warning) 10%, var(--selection-bg));
  --selection-bg-disabled: var(--color-bg-tertiary);

  /* Selection Borders */
  --selection-border: var(--color-border-default);
  --selection-border-hover: var(--color-accent-primary);
  --selection-border-selected: var(--selection-accent, var(--color-accent-success));
  --selection-border-pending: var(--color-accent-warning);
  --selection-border-disabled: var(--color-border-subtle);

  /* Selection Text */
  --selection-text: var(--color-text-secondary);
  --selection-text-hover: var(--color-text-primary);
  --selection-text-selected: var(--selection-accent, var(--color-accent-success));
  --selection-text-pending: var(--color-accent-warning);
  --selection-text-disabled: var(--color-text-muted);

  /* Selection Accent (override per-variant) */
  --selection-accent: var(--color-accent-success);
  --selection-accent-warning: var(--color-accent-warning);

  /* Selection Sizing */
  --selection-padding-x: var(--space-3);
  --selection-padding-y: var(--space-2);
  --selection-border-radius: var(--radius-md);
  --selection-border-width: 1px;

  /* Selection Transitions */
  --selection-transition: all 0.15s ease;
}

/* ========================================
 * Selection Base Class
 * Core styles shared by all selection elements
 * ======================================== */

.selection-base {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--selection-padding-y) var(--selection-padding-x);
  background: var(--selection-bg);
  border: var(--selection-border-width) solid var(--selection-border);
  border-radius: var(--selection-border-radius);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--selection-text);
  cursor: pointer;
  transition: var(--selection-transition);
  position: relative;
  user-select: none;
}

/* ========================================
 * Selection States
 * ======================================== */

/* Hover State */
.selection-base:hover:not(.selection-base--disabled):not(.selection-base--pending) {
  background: var(--selection-bg-hover);
  border-color: var(--selection-border-hover);
  color: var(--selection-text-hover);
}

/* Focus State */
.selection-base:focus {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--selection-accent) 30%, transparent);
}

.selection-base:focus-visible {
  outline: 2px solid var(--selection-accent);
  outline-offset: 2px;
}

/* Selected State */
.selection-base--selected {
  background: var(--selection-bg-selected);
  border-color: var(--selection-border-selected);
  color: var(--selection-text-selected);
}

.selection-base--selected:hover:not(.selection-base--disabled) {
  background: color-mix(in srgb, var(--selection-accent) 20%, var(--selection-bg));
}

/* Pending/Loading State */
.selection-base--pending {
  background: var(--selection-bg-pending);
  border-color: var(--selection-border-pending);
  color: var(--selection-text-pending);
  opacity: 0.8;
  pointer-events: none;
}

/* Disabled State */
.selection-base--disabled {
  background: var(--selection-bg-disabled);
  border-color: var(--selection-border-disabled);
  color: var(--selection-text-disabled);
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dimmed State (for non-selected items when others are selected) */
.selection-base--dimmed {
  opacity: 0.5;
}

.selection-base--dimmed:hover:not(.selection-base--disabled) {
  opacity: 0.8;
}

/* Hidden State */
.selection-base--hidden {
  display: none;
}

/* ========================================
 * Selection Indicators
 * Checkmarks, spinners, badges
 * ======================================== */

/* Checkmark for selected state */
.selection-base__check {
  display: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.selection-base--selected .selection-base__check {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--selection-accent);
}

.selection-base--selected .selection-base__check::before {
  content: '\2713';
  font-weight: bold;
  font-size: 12px;
}

/* Spinner for pending state */
.selection-base--pending::after {
  content: '';
  position: absolute;
  top: 50%;
  right: var(--selection-padding-x);
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid var(--selection-border-pending);
  border-top-color: transparent;
  border-radius: 50%;
  animation: selection-spin 0.6s linear infinite;
}

@keyframes selection-spin {
  to { transform: rotate(360deg); }
}

/* ========================================
 * Selection Variants (Color Themes)
 * ======================================== */

/* Primary variant (blue) */
.selection-base--primary {
  --selection-accent: var(--color-accent-primary);
}

/* Success variant (green) - default */
.selection-base--success {
  --selection-accent: var(--color-accent-success);
}

/* Warning variant (amber/gold) */
.selection-base--warning {
  --selection-accent: var(--color-accent-warning);
}

/* Danger variant (red) */
.selection-base--danger {
  --selection-accent: var(--color-accent-error);
}

/* Purple variant (for spells/magic) */
.selection-base--purple {
  --selection-accent: #8a2be2;
}

/* Gold variant (for equipment/treasure) */
.selection-base--gold {
  --selection-accent: #ffd700;
}

/* ========================================
 * Container Theme Classes
 * Applied to carousel/panel containers to theme all selections within
 * These match the theme values from present_choices tool
 * ======================================== */

/* Theme: Default (blue accent) */
.theme-default {
  --selection-accent: var(--color-accent-primary);
  --selection-bg-selected: color-mix(in srgb, var(--color-accent-primary) 15%, var(--selection-bg));
  --selection-border-selected: var(--color-accent-primary);
  --selection-text-selected: var(--color-accent-primary);
}

/* Theme: Combat (red - for targets, attacks, damage) */
.theme-combat {
  --selection-accent: var(--color-accent-error);
  --selection-bg-selected: color-mix(in srgb, var(--color-accent-error) 15%, var(--selection-bg));
  --selection-border-selected: var(--color-accent-error);
  --selection-text-selected: var(--color-accent-error);
  --selection-border-hover: var(--color-accent-error);
}

/* Theme: Magic (purple - for spells, arcane effects) */
.theme-magic {
  --selection-accent: #8b5cf6;
  --selection-bg-selected: color-mix(in srgb, #8b5cf6 15%, var(--selection-bg));
  --selection-border-selected: #8b5cf6;
  --selection-text-selected: #8b5cf6;
  --selection-border-hover: #a78bfa;
}

/* Theme: Gold (amber - for shopping, treasure, economy) */
.theme-gold {
  --selection-accent: #f59e0b;
  --selection-bg-selected: color-mix(in srgb, #f59e0b 15%, var(--selection-bg));
  --selection-border-selected: #f59e0b;
  --selection-text-selected: #f59e0b;
  --selection-border-hover: #fbbf24;
}

/* Theme: Primary (blue - for social, dialogue, NPCs) */
.theme-primary {
  --selection-accent: var(--color-accent-primary);
  --selection-bg-selected: color-mix(in srgb, var(--color-accent-primary) 15%, var(--selection-bg));
  --selection-border-selected: var(--color-accent-primary);
  --selection-text-selected: var(--color-accent-primary);
}

/* Theme: Success (green - for character creation, positive choices) */
.theme-success {
  --selection-accent: var(--color-accent-success);
  --selection-bg-selected: color-mix(in srgb, var(--color-accent-success) 15%, var(--selection-bg));
  --selection-border-selected: var(--color-accent-success);
  --selection-text-selected: var(--color-accent-success);
}

/* Theme: Danger (red variant - for dangerous/risky choices) */
.theme-danger {
  --selection-accent: var(--color-accent-error);
  --selection-bg-selected: color-mix(in srgb, var(--color-accent-error) 20%, var(--selection-bg));
  --selection-border-selected: var(--color-accent-error);
  --selection-text-selected: var(--color-accent-error);
}

/* ========================================
 * Selection Size Variants
 * ======================================== */

/* Compact/Small */
.selection-base--sm {
  --selection-padding-x: var(--space-2);
  --selection-padding-y: var(--space-1);
  font-size: var(--font-size-xs);
  gap: var(--space-1);
}

/* Large */
.selection-base--lg {
  --selection-padding-x: var(--space-4);
  --selection-padding-y: var(--space-3);
  font-size: var(--font-size-base);
  gap: var(--space-3);
}

/* ========================================
 * Selection Shape Variants
 * ======================================== */

/* Pill shape (full border-radius) */
.selection-base--pill {
  --selection-border-radius: var(--radius-full);
}

/* Square shape */
.selection-base--square {
  --selection-border-radius: 0;
}

/* Card shape (larger border-radius) */
.selection-base--card {
  --selection-border-radius: var(--radius-lg);
}

/* ========================================
 * Selection Layout Variants
 * ======================================== */

/* Block (full-width) */
.selection-base--block {
  display: flex;
  width: 100%;
}

/* Stacked (vertical content) */
.selection-base--stacked {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* ========================================
 * Selection Container
 * For groups of selection elements
 * ======================================== */

.selection-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.selection-group--vertical {
  flex-direction: column;
}

.selection-group--horizontal {
  flex-direction: row;
}

.selection-group--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
}

/* ========================================
 * Touch Device Optimizations
 * ======================================== */

@media (hover: none) or (pointer: coarse) {
  .selection-base {
    min-height: 44px; /* Touch target size */
  }

  .selection-base:active:not(.selection-base--disabled):not(.selection-base--pending) {
    transform: scale(0.98);
    opacity: 0.9;
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .selection-base {
    transition: none;
  }

  .selection-base--pending::after {
    animation: none;
  }
}

/* ========================================
 * Selection Lock State (UX Fix)
 * Prevents rapid double-clicks during character creation
 * ======================================== */

/* When user clicks too fast (within 200ms), show visual feedback instead of silent failure */
.selection-card.selection-locked,
.selection-base.selection-locked {
  opacity: 0.5;
  cursor: wait;
  pointer-events: none;
  transition: opacity 0.2s ease;
}