/**
 * Icon Component Styles
 * PORTED FROM: clj/ty/components/icon.css
 */
export declare const iconStyles = "\n:host {\n  /* Display & Layout - CRITICAL: No containment to prevent paint deferral */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 0;\n  \n  /* Dimensions with CSS variable support for flexibility */\n  width: var(--ty-icon-size, 1em);\n  height: var(--ty-icon-size, 1em);\n  \n  /* Enforce square aspect ratio */\n  aspect-ratio: 1 / 1;\n  \n  /* Ensure minimum size when in slots */\n  min-width: 1em;\n  min-height: 1em;\n  \n  /* Color & Transitions */\n  color: inherit;\n  transition: color var(--ty-transition-fast);\n  \n  /* Flex Behavior */\n  flex-shrink: 0;\n  \n  /* Visibility - Force immediate rendering */\n  visibility: visible !important;\n  opacity: 1;\n  \n  /* ANTI-FLICKER: Force browser to paint immediately */\n  will-change: contents;\n  \n  /* Prevent any sub-pixel rendering issues */\n  transform: translateZ(0);\n  -webkit-font-smoothing: antialiased;\n}\n\n/* The SVG element inside shadow DOM */\n:host svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n  \n  /* Force immediate SVG rendering */\n  will-change: auto;\n  transform: translateZ(0);\n}\n\n/* When used in slots, ensure proper display */\n:host([slot]) {\n  display: inline-flex;\n}\n\n/* Size variants via CSS classes on the host */\n:host(.icon-xs) {\n  width: 0.75em;\n  height: 0.75em;\n}\n\n:host(.icon-sm) {\n  width: 0.875em;\n  height: 0.875em;\n}\n\n:host(.icon-md) {\n  width: 1em;\n  height: 1em;\n}\n\n:host(.icon-lg) {\n  width: 1.25em;\n  height: 1.25em;\n}\n\n:host(.icon-xl) {\n  width: 1.5em;\n  height: 1.5em;\n}\n\n:host(.icon-2xl) {\n  width: 2em;\n  height: 2em;\n}\n\n/* Fixed pixel sizes */\n:host(.icon-12) {\n  width: 12px;\n  height: 12px;\n}\n\n:host(.icon-14) {\n  width: 14px;\n  height: 14px;\n}\n\n:host(.icon-16) {\n  width: 16px;\n  height: 16px;\n}\n\n:host(.icon-18) {\n  width: 18px;\n  height: 18px;\n}\n\n:host(.icon-20) {\n  width: 20px;\n  height: 20px;\n}\n\n:host(.icon-24) {\n  width: 24px;\n  height: 24px;\n}\n\n:host(.icon-32) {\n  width: 32px;\n  height: 32px;\n}\n\n:host(.icon-48) {\n  width: 48px;\n  height: 48px;\n}\n\n:host(.icon-64) {\n  width: 64px;\n  height: 64px;\n}\n\n:host(.icon-80) {\n  width: 80px;\n  height: 80px;\n}\n\n:host(.icon-96) {\n  width: 96px;\n  height: 96px;\n}\n\n/* Spinning animation - default tempo */\n:host(.icon-spin) {\n  animation: icon-spin 1s linear infinite;\n}\n\n/* Spinning animation - slow tempo */\n:host(.icon-spin.icon-tempo-slow) {\n  animation: icon-spin 2s linear infinite;\n}\n\n/* Spinning animation - fast tempo */\n:host(.icon-spin.icon-tempo-fast) {\n  animation: icon-spin 0.5s linear infinite;\n}\n\n@keyframes icon-spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Pulse animation - default tempo */\n:host(.icon-pulse) {\n  animation: icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Pulse animation - slow tempo */\n:host(.icon-pulse.icon-tempo-slow) {\n  animation: icon-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Pulse animation - fast tempo */\n:host(.icon-pulse.icon-tempo-fast) {\n  animation: icon-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes icon-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Accessibility: ensure icons are not announced by screen readers by default */\n:host {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n/* Allow pointer events to pass through by default */\n:host(:not(.icon-clickable)) {\n  pointer-events: none;\n}\n\n/* Clickable icons */\n:host(.icon-clickable) {\n  cursor: pointer;\n  pointer-events: auto;\n  transition: color var(--ty-transition-fast), transform var(--ty-transition-fast);\n}\n\n:host(.icon-clickable:hover) {\n  transform: scale(1.1);\n}\n\n:host(.icon-clickable:active) {\n  transform: scale(0.95);\n}\n\n/* Disabled state */\n:host(.icon-disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Block display variant */\n:host(.icon-block) {\n  display: block;\n}\n";
//# sourceMappingURL=icon.d.ts.map