/**
 * Wizard Component Styles
 *
 * Styles for the ty-wizard container component including:
 * - Flexbox layout with step indicators and content carousel
 * - Progress line with animated completion overlay
 * - Step circles with completed/active/pending states
 * - Carousel viewport with transform animations
 * - Responsive design with prefers-reduced-motion support
 * - Fully customizable via CSS Parts (::part)
 *
 * Uses global design system tokens (no component-specific variables):
 * - Surfaces: --ty-surface-floating, --ty-surface-content, --ty-surface-elevated
 * - Colors: --ty-color-success, --ty-color-primary, --ty-color-danger
 * - Borders: --ty-border, --ty-border-soft
 * - Text: --ty-text, --ty-text-soft
 *
 * CSS Parts (for styling via ::part):
 * - indicators-wrapper: The header containing step indicators
 * - progress-line: The background progress track
 * - step-circle: Individual step circle indicators
 * - panels-container: The content viewport
 */
export declare const wizardStyles = "\n:host {\n  display: block;\n  width: var(--wizard-width, 100%);\n  height: var(--wizard-height, 700px);\n  box-sizing: border-box;\n  /* Note: --step-circle-size is NOT set here to allow inheritance from light DOM.\n     Use fallbacks in var() calls instead. Set on ty-wizard element to customize. */\n}\n\n.wizard-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: 12px;\n  border: 1px solid var(--ty-border);\n  background: var(--ty-surface-floating);\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n/* ===================================== */\n/* Step Indicators Wrapper */\n/* Expose as CSS Part for full styling control */\n/* ===================================== */\n\n.step-indicators-wrapper {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  position: relative;\n  padding: 24px 24px 16px;\n  border-bottom: 1px solid var(--ty-border-soft, var(--ty-border));\n  background: var(--ty-surface-content);\n}\n\n/* ===================================== */\n/* Progress Line (behind step circles) */\n/* Expose as CSS Part for custom styling */\n/* ===================================== */\n\n.progress-line {\n  position: absolute;\n  /*\n   * With equal-width indicators (flex: 1), each takes 100%/N of the width.\n   * Circle centers are at: 50%/N, 150%/N, 250%/N, ... from left.\n   * Line spans from first center (50%/N) to last center (100% - 50%/N).\n   * Inset = 50% / step-count from each side.\n   */\n  left: calc(50% / var(--step-count, 4));\n  right: calc(50% / var(--step-count, 4));\n  /* Vertically center with step circles - uses circle size variable */\n  top: calc(var(--step-circle-size, 32px) / 2 - 1px);\n  height: 2px;\n  background: var(--ty-border);\n  z-index: 0;\n  pointer-events: none;\n  transition: opacity var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n}\n\n.progress-overlay {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background: var(--ty-color-success);\n  transition: width var(--transition-duration, 500ms) var(--transition-easing, ease-in-out);\n  will-change: width;\n}\n\n/* ===================================== */\n/* Step Indicators Container */\n/* ===================================== */\n\n.step-indicators {\n  display: flex;\n  align-items: flex-start;\n  position: relative;\n  /* No padding - let equal-width indicators fill the space */\n}\n\n/* ===================================== */\n/* Individual Step Indicator */\n/* Expose as CSS Part for step styling */\n/* ===================================== */\n\n.step-indicator {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  padding: 0;\n  font: inherit;\n  transition: opacity 200ms;\n  /* Equal width for all indicators - makes progress line alignment predictable */\n  flex: 1;\n  min-width: 0;\n}\n\n.step-indicator[aria-disabled=\"true\"] {\n  opacity: 0.4;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.step-indicator:focus-visible {\n  outline: 2px solid var(--ty-color-primary);\n  outline-offset: 4px;\n  border-radius: 50%;\n}\n\n/* ===================================== */\n/* Step Circle - Smaller, cleaner */\n/* Expose as CSS Part for circle styling */\n/* ===================================== */\n\n.step-circle {\n  /* Circle size - set --step-circle-size on ty-wizard element to customize */\n  width: var(--step-circle-size, 32px);\n  height: var(--step-circle-size, 32px);\n  border-radius: 50%;\n  border: 2px solid;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 10;\n  transition: all var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n\n/* Completed state - green with success glow */\n.step-circle[data-state=\"completed\"] {\n  background: var(--ty-color-success);\n  border-color: var(--ty-color-success-600, var(--ty-color-success));\n  color: white;\n  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);\n}\n\n/* Active state - primary with primary glow */\n.step-circle[data-state=\"active\"] {\n  background: var(--ty-color-primary);\n  border-color: var(--ty-color-primary-600, var(--ty-color-primary));\n  color: white;\n  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);\n}\n\n/* Pending state - neutral gray */\n.step-circle[data-state=\"pending\"] {\n  background: var(--ty-surface-elevated, #f3f4f6);\n  border-color: var(--ty-border, #d1d5db);\n  color: var(--ty-text-soft, #6b7280);\n}\n\n/* Error state - red with danger glow */\n.step-circle[data-state=\"error\"] {\n  background: var(--ty-color-danger, #ef4444);\n  border-color: var(--ty-color-danger-600, #dc2626);\n  color: white;\n  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);\n}\n\n/* ===================================== */\n/* Step Text Container */\n/* Wraps label and description */\n/* ===================================== */\n\n.step-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  align-items: center;\n}\n\n/* ===================================== */\n/* Step Label - Main title */\n/* ===================================== */\n\n.step-label {\n  font-size: var(--ty-font-sm, 14px);\n  font-weight: var(--ty-font-semibold, 600);\n  color: var(--ty-text, inherit);\n  transition: color 200ms;\n}\n\n.step-indicator[aria-selected=\"true\"] .step-label {\n  color: var(--ty-text-strong, inherit);\n}\n\n.step-indicator[aria-selected=\"false\"] .step-label {\n  color: var(--ty-text-soft, inherit);\n}\n\n/* ===================================== */\n/* Step Description - Subtitle */\n/* ===================================== */\n\n.step-description {\n  font-size: var(--ty-font-xs, 12px);\n  font-weight: var(--ty-font-normal, 400);\n  color: var(--ty-text-soft, #9ca3af);\n  transition: color 200ms;\n  text-align: center;\n  max-width: 120px;\n}\n\n.step-indicator[aria-selected=\"true\"] .step-description {\n  color: var(--ty-text, inherit);\n}\n\n/* ===================================== */\n/* Custom Indicator Content via Slots */\n/* ===================================== */\n\n::slotted([slot^=\"indicator-\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n/* ===================================== */\n/* Panels Viewport */\n/* Expose as CSS Part for panels container styling */\n/* ===================================== */\n\n.panels-viewport {\n  position: relative;\n  flex: 1;\n  overflow: hidden;\n  /* Critical: hides off-screen panels */\n  min-height: 0;\n  /* Allows flex child to shrink */\n  background: var(--ty-surface-elevated);\n}\n\n/* ===================================== */\n/* Panels Wrapper (slides horizontally) */\n/* ===================================== */\n\n.panels-wrapper {\n  display: flex;\n  height: 100%;\n  transition: transform var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n  will-change: transform;\n}\n\n/* ===================================== */\n/* Slotted Step Panels */\n/* ===================================== */\n\n::slotted(ty-step) {\n  width: var(--wizard-width, 100%);\n  height: 100%;\n  flex-shrink: 0;\n}\n\n/* ===================================== */\n/* Accessibility & Motion Preferences */\n/* ===================================== */\n\n/* Respect user's motion preferences */\n@media (prefers-reduced-motion: reduce) {\n  .panels-wrapper {\n    transition-duration: 0ms !important;\n  }\n\n  .progress-overlay {\n    transition-duration: 0ms !important;\n  }\n\n  .step-circle {\n    transition-duration: 0ms !important;\n  }\n\n  .progress-line {\n    transition-duration: 0ms !important;\n  }\n}\n\n/* Screen reader only content */\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n";
//# sourceMappingURL=wizard.d.ts.map