/**
 * Tag Component Styles
 * PORTED FROM: clj/ty/components/tag.css
 */
export declare const tagStyles = "\n/* Tag Component Styles using centralized ty.variables.css */\n\n/* Host element */\n\n/* Hidden attribute support */\n:host([hidden]) {\n  display: none !important;\n}\n\n/* Main container */\n.tag-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ty-spacing-2);\n  /* Default pill shape - can be overridden */\n  border-radius: var(--ty-radius-full);\n  font-family: var(--ty-font-sans);\n  font-weight: var(--ty-font-medium);\n  line-height: 1;\n  text-align: center;\n  white-space: nowrap;\n  user-select: none;\n  box-sizing: border-box;\n\n  /* Default MD size - no need for [size=\"md\"] */\n  padding: 0 var(--ty-spacing-1);\n  font-size: var(--ty-font-sm);\n  min-height: 24px;\n  min-width: var(--ty-spacing-16);\n\n  /* Transitions using centralized values */\n  transition: var(--ty-transition-all);\n\n  /* Default styling - transparent with visible border */\n  background: transparent;\n  color: var(--ty-text);\n  border: 1.5px solid;\n  border-color: var(--ty-text-soft);\n}\n\n/* Non-pill variant - rectangular with rounded corners */\n:host([pill=\"false\"]) .tag-container,\n:host([not-pill=\"true\"]) .tag-container {\n  border-radius: var(--ty-radius-md);\n  /* 6px instead of full pill */\n}\n\n/* Tags with value attribute but NOT selected should be clickable */\n:host([value]:not([selected])) .tag-container:not([aria-disabled=\"true\"]) {\n  cursor: pointer;\n}\n\n:host([selected]) .tag-container:not([aria-disabled=\"true\"]) {\n  cursor: initial;\n}\n\n.tag-container[tabindex]:not([aria-disabled=\"true\"]):hover {\n  background: var(--ty-bg-neutral-soft);\n  transform: translateY(-1px);\n  box-shadow: var(--ty-shadow-sm);\n}\n\n.tag-container[tabindex]:not([aria-disabled=\"true\"]):active {\n  transform: translateY(0);\n  box-shadow: var(--ty-shadow-sm);\n}\n\n.tag-container[tabindex]:focus {\n  outline: none;\n}\n\n/* Disabled state */\n.tag-container[aria-disabled=\"true\"] {\n  opacity: 0.6;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Slot containers */\n.tag-start,\n.tag-content,\n.tag-end {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.tag-content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Dismiss button */\n.tag-dismiss {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  background: none;\n  border: none;\n  color: currentColor;\n  cursor: pointer;\n  border-radius: var(--ty-radius-full);\n  transition: var(--ty-transition-all);\n  opacity: 0.7;\n  flex-shrink: 0;\n  /* Default MD dismiss button size */\n  width: var(--ty-spacing-4);\n  /* 16px */\n  height: var(--ty-spacing-4);\n}\n\n.tag-dismiss:hover {\n  opacity: 1;\n  background: rgba(0, 0, 0, 0.1);\n}\n\n.tag-dismiss svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Size variants - override defaults */\n:host([size=\"xs\"]) .tag-container {\n  padding: 0 var(--ty-spacing-mini);\n  font-size: var(--ty-font-xs);\n  min-height: 16px;\n  min-width: var(--ty-spacing-10);\n}\n\n:host([size=\"xs\"]) .tag-dismiss {\n  width: var(--ty-spacing-3);\n  height: var(--ty-spacing-3);\n  margin-left: var(--ty-spacing-2);\n}\n\n:host([size=\"sm\"]) .tag-container {\n  padding: 0 var(--ty-spacing-1);\n  font-size: var(--ty-font-xs);\n  min-height: 20px;\n  min-width: var(--ty-spacing-12);\n}\n\n:host([size=\"sm\"]) .tag-dismiss {\n  width: var(--ty-spacing-3);\n  height: var(--ty-spacing-3);\n  margin-left: var(--ty-spacing-2);\n}\n\n/* MD is now the default - no need for explicit [size=\"md\"] selector */\n/* All default styles above apply to MD size (min-height: 24px) */\n\n:host([size=\"lg\"]) .tag-container {\n  padding: 0 var(--ty-spacing-2);\n  font-size: var(--ty-font-lg);\n  min-height: 30px;\n  min-width: var(--ty-spacing-20);\n}\n\n:host([size=\"lg\"]) .tag-dismiss {\n  width: var(--ty-spacing-5);\n  height: var(--ty-spacing-5);\n  margin-left: var(--ty-spacing-4);\n}\n\n:host([size=\"xl\"]) .tag-container {\n  padding: 0 var(--ty-spacing-2);\n  font-size: var(--ty-font-2xl);\n  min-height: 34px;\n  min-width: var(--ty-spacing-24);\n}\n\n:host([size=\"xl\"]) .tag-dismiss {\n  width: var(--ty-spacing-5);\n  height: var(--ty-spacing-5);\n  margin-left: var(--ty-spacing-4);\n}\n\n/* ===== NEW: INDUSTRY-STANDARD FLAVOR VARIANTS ===== */\n\n/* Primary */\n:host([flavor=\"primary\"]) .tag-container {\n  background: var(--ty-bg-primary);\n  color: var(--ty-color-primary-strong);\n  border-color: var(--ty-border-primary);\n}\n\n:host([flavor=\"primary\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-primary-mild);\n}\n\n:host([flavor=\"primary\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-primary-faint);\n}\n\n/* Secondary */\n:host([flavor=\"secondary\"]) .tag-container {\n  background: var(--ty-bg-secondary);\n  color: var(--ty-color-secondary-strong);\n  border-color: var(--ty-border-secondary);\n}\n\n:host([flavor=\"secondary\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-secondary-mild);\n}\n\n:host([flavor=\"secondary\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-secondary-faint);\n}\n\n/* Success */\n:host([flavor=\"success\"]) .tag-container {\n  background: var(--ty-bg-success);\n  color: var(--ty-color-success-strong);\n  border-color: var(--ty-border-success);\n}\n\n:host([flavor=\"success\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-success-mild);\n}\n\n:host([flavor=\"success\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-success-faint);\n}\n\n/* Danger */\n:host([flavor=\"danger\"]) .tag-container {\n  background: var(--ty-bg-danger);\n  color: var(--ty-color-danger-strong);\n  border-color: var(--ty-border-danger);\n}\n\n:host([flavor=\"danger\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-danger-mild);\n}\n\n:host([flavor=\"danger\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-danger-faint);\n}\n\n/* Warning */\n:host([flavor=\"warning\"]) .tag-container {\n  background: var(--ty-bg-warning);\n  color: var(--ty-color-warning-strong);\n  border-color: var(--ty-border-warning);\n}\n\n:host([flavor=\"warning\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-warning-mild);\n}\n\n:host([flavor=\"warning\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-warning-faint);\n}\n\n/* Info */\n:host([flavor=\"info\"]) .tag-container {\n  background: var(--ty-bg-info);\n  color: var(--ty-color-info-strong);\n  border-color: var(--ty-border-info);\n}\n\n:host([flavor=\"info\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-info-mild);\n}\n\n:host([flavor=\"info\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-info-faint);\n}\n\n/* ===== LEGACY FLAVOR VARIANTS (Backward Compatibility) ===== */\n/* \n   These legacy flavor attributes continue to work exactly as before\n   because they reference the new semantic tokens via CSS variable mapping:\n   \n   \n   The mapping is handled in ty.variables.css, so no changes needed here.\n*/\n\n/* Flavor variants using centralized semantic colors */\n\n/* Neutral (default) - transparent with visible border */\n:host([flavor=\"neutral\"]) .tag-container {\n  background: transparent;\n  color: var(--ty-text);\n  border-color: var(--ty-text-soft);\n}\n\n:host([flavor=\"neutral\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n:host([flavor=\"neutral\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-border-soft);\n}\n\n/* Slotted content styling */\n.tag-start ::slotted(*),\n.tag-content ::slotted(*),\n.tag-end ::slotted(*) {\n  display: flex;\n  align-items: center;\n}\n\n/* Icon sizing for slotted icons */\n.tag-start ::slotted(ty-icon),\n.tag-end ::slotted(ty-icon) {\n  width: 1em;\n  height: 1em;\n  flex-shrink: 0;\n}\n\n/* Count/badge styling using centralized spacing */\n.tag-end ::slotted(.count) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--ty-spacing-6);\n  /* 24px */\n  height: var(--ty-spacing-5);\n  /* 20px */\n  padding: 0 var(--ty-spacing-2);\n  /* 0 8px */\n  background: rgba(0, 0, 0, 0.1);\n  border-radius: var(--ty-radius-full);\n  font-size: var(--ty-font-xs);\n  font-weight: var(--ty-font-semibold);\n  line-height: var(--ty-line-height-none);\n  flex-shrink: 0;\n}\n\n/* Special handling for long text content */\n.tag-content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:host([data-type=\"user\"]) .tag-container {\n  min-width: var(--ty-spacing-20);\n  /* 80px for user tags */\n}\n\n/* Dark mode is handled automatically by the centralized variables */\n";
//# sourceMappingURL=tag.d.ts.map