/**
 * Button Component Styles
 * PORTED FROM: clj/ty/components/button.css
 * Maintains full compatibility with ClojureScript version
 */
export declare const buttonStyles = "\n:host {\n  display: inline-block;\n  font-family: var(--ty-font-sans);\n}\n\n:host([wide=\"true\"]) {\n  display: flex;\n  flex-grow: 1;\n}\n\nbutton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ty-spacing-1);\n  /* Base styles */\n  font-size: var(--ty-font-xs);\n  font-weight: var(--ty-font-medium);\n  cursor: pointer;\n  user-select: none;\n  transition: var(--ty-transition-all);\n  /* Default appearance */\n  background: var(--ty-bg-neutral);\n  color: var(--ty-color-neutral);\n  border: 1px solid var(--ty-border-neutral);\n}\n\nbutton:not(.pill) {\n  border-radius: var(--ty-radius-md);\n}\n\n/* Slot styling */\n::slotted(*) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Ensure icons in slots are sized appropriately */\n::slotted(ty-icon) {\n  flex-shrink: 0;\n}\n\n/* Button text */\n.button-text:empty {\n  display: none;\n}\n\nbutton.action.lg,\nbutton.action.xl {\n  height: 2.5rem;\n  width: 2.5rem;\n}\n\nbutton.action.lg ::slotted(ty-icon),\nbutton.action.xl ::slotted(ty-icon) {\n  height: 1.5rem;\n  width: 1.5rem;\n}\n\nbutton.action {\n  align-items: center;\n  justify-content: center;\n  gap: 0px !important;\n  height: 2rem;\n  width: 2rem;\n  padding: 0px !important;\n}\n\nbutton.action ::slotted(ty-icon) {\n  height: 1.25rem;\n  width: 1.25rem;\n}\n\nbutton.action.sm,\nbutton.action.xs {\n  height: 1.5rem;\n  width: 1.5rem;\n}\n\nbutton.action.sm ::slotted(ty-icon),\nbutton.action.xs ::slotted(ty-icon) {\n  height: 0.75rem;\n  width: 0.75rem;\n}\n\n/* Base interaction states */\nbutton:hover:not(:disabled) {\n  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15), 0 1px 6px rgba(0, 0, 0, 0.1);\n}\n\nbutton:active:not(:disabled) {\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);\n}\n\nbutton:focus-visible {\n  outline: none;\n}\n\n/* Disabled state */\nbutton:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n:host([wide=\"true\"]) button {\n  flex-grow: 1;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\nbutton.xs {\n  padding: 0px var(--ty-spacing-1);\n  font-size: var(--ty-font-xs);\n  gap: var(--ty-spacing-1);\n  min-height: 1.3rem;\n  min-width: 1.3rem;\n}\n\n/* Small */\nbutton.sm {\n  padding: 0px var(--ty-spacing-2);\n  font-size: var(--ty-font-sm);\n  gap: var(--ty-spacing-1);\n  min-height: 1.5rem;\n  min-width: 1.5rem;\n}\n\n/* Medium (default) */\nbutton.md {\n  padding: 0px var(--ty-spacing-2);\n  font-size: var(--ty-font-base);\n  gap: var(--ty-spacing-1);\n  min-height: 2rem;\n  min-width: 2rem;\n}\n\n/* Large */\nbutton.lg {\n  padding: 0px var(--ty-spacing-3);\n  font-size: var(--ty-font-lg);\n  gap: var(--ty-spacing-2);\n  min-height: 2.5rem;\n  min-width: 2.5rem;\n}\n\n/* Extra Large */\nbutton.xl {\n  padding: 0px var(--ty-spacing-4);\n  font-size: var(--ty-font-xl);\n  gap: var(--ty-spacing-3);\n  min-height: 3.25rem;\n  min-width: 3.25rem;\n}\n\n/* ===== PILL MODIFIER ===== */\n\n/* Base pill style */\nbutton.pill {\n  border-radius: 9999px;\n  /* Adjust horizontal padding for better pill shape */\n  padding-left: 1.25em;\n  padding-right: 1.25em;\n}\n\n/* Size-specific pill adjustments */\nbutton.pill.xs {\n  padding-left: 1em;\n  padding-right: 1em;\n}\n\nbutton.pill.sm {\n  padding-left: 1.125em;\n  padding-right: 1.125em;\n}\n\nbutton.pill.lg {\n  padding-left: 1.5em;\n  padding-right: 1.5em;\n}\n\nbutton.pill.xl {\n  padding-left: 1.75em;\n  padding-right: 1.75em;\n}\n\n/* Icon-only pill buttons (circular) */\nbutton.pill:has(ty-icon:only-child),\nbutton.pill:has(slot[name=\"start\"]:only-child),\nbutton.pill:has(slot[name=\"end\"]:only-child) {\n  /* Make it circular */\n  padding: 0;\n  aspect-ratio: 1;\n  min-width: var(--ty-size-md);\n}\n\n/* Size-specific circular pills */\nbutton.pill.xs:has(ty-icon:only-child) {\n  min-width: 2rem;\n  min-height: 2rem;\n}\n\nbutton.pill.sm:has(ty-icon:only-child) {\n  min-width: 2.25rem;\n  min-height: 2.25rem;\n}\n\nbutton.pill.md:has(ty-icon:only-child) {\n  min-width: 2.5rem;\n  min-height: 2.5rem;\n}\n\nbutton.pill.lg:has(ty-icon:only-child) {\n  min-width: 3rem;\n  min-height: 3rem;\n}\n\nbutton.pill.xl:has(ty-icon:only-child) {\n  min-width: 3.5rem;\n  min-height: 3.5rem;\n}\n\n/* Accent - Full colored background with white text */\nbutton.accent {\n  color: white;\n  border: none;\n}\n\n/* Filled - Tonal background, no border */\nbutton.filled {\n  border: none;\n}\n\n/* Outlined - Transparent background with border */\nbutton.outlined {\n  background: transparent;\n}\n\n/* Plain - Text only, no background or border */\nbutton.plain {\n  background: transparent;\n  border: none;\n}\n\n/* Plain specific hover - remove shadow */\nbutton.plain:hover:not(:disabled) {\n  box-shadow: none;\n}\n\n/* Plain specific active - remove shadow */\nbutton.plain:active:not(:disabled) {\n  box-shadow: none;\n}\n\n/* ----- PRIMARY FLAVOR ----- */\n\n/* Filled + Outlined (default) */\nbutton.filled-outlined.primary {\n  background: var(--ty-bg-primary);\n  color: var(--ty-color-primary);\n  border-color: var(--ty-border-primary);\n}\n\nbutton.filled-outlined.primary:hover:not(:disabled) {\n  background: var(--ty-bg-primary-mild);\n}\n\nbutton.filled-outlined.primary:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-primary);\n}\n\n/* Accent */\nbutton.accent.primary {\n  background: var(--ty-accent-primary);\n}\n\nbutton.accent.primary:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-primary);\n}\n\n/* Filled */\nbutton.filled.primary {\n  background: var(--ty-bg-primary);\n  color: var(--ty-color-primary);\n}\n\nbutton.filled.primary:hover:not(:disabled) {\n  background: var(--ty-bg-primary-mild);\n}\n\n/* Outlined */\nbutton.outlined.primary {\n  color: var(--ty-color-primary);\n  border-color: var(--ty-color-primary);\n}\n\nbutton.outlined.primary:hover:not(:disabled) {\n  background: var(--ty-bg-primary-soft);\n}\n\n/* Plain */\nbutton.plain.primary {\n  color: var(--ty-color-primary);\n}\n\nbutton.plain.primary:hover:not(:disabled) {\n  background: var(--ty-bg-primary-soft);\n}\n\n/* ----- SECONDARY FLAVOR ----- */\n\n/* Filled + Outlined (default) */\nbutton.filled-outlined.secondary {\n  background: var(--ty-bg-secondary);\n  color: var(--ty-color-secondary);\n  border-color: var(--ty-border-secondary);\n}\n\nbutton.filled-outlined.secondary:hover:not(:disabled) {\n  background: var(--ty-bg-secondary-mild);\n}\n\nbutton.filled-outlined.secondary:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-secondary);\n}\n\n/* Accent */\nbutton.accent.secondary {\n  background: var(--ty-accent-secondary);\n}\n\nbutton.accent.secondary:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-secondary);\n}\n\n/* Filled */\nbutton.filled.secondary {\n  background: var(--ty-bg-secondary);\n  color: var(--ty-color-secondary);\n}\n\nbutton.filled.secondary:hover:not(:disabled) {\n  background: var(--ty-bg-secondary-mild);\n}\n\n/* Outlined */\nbutton.outlined.secondary {\n  color: var(--ty-color-secondary);\n  border-color: var(--ty-color-secondary);\n}\n\nbutton.outlined.secondary:hover:not(:disabled) {\n  background: var(--ty-bg-secondary-soft);\n}\n\n/* Plain */\nbutton.plain.secondary {\n  color: var(--ty-color-secondary);\n}\n\nbutton.plain.secondary:hover:not(:disabled) {\n  background: var(--ty-bg-secondary-soft);\n}\n\n/* ----- SUCCESS FLAVOR ----- */\n\n/* Filled + Outlined (default) */\nbutton.filled-outlined.success {\n  background: var(--ty-bg-success-soft);\n  color: var(--ty-color-success);\n  border-color: var(--ty-border-success);\n}\n\nbutton.filled-outlined.success:hover:not(:disabled) {\n  background: var(--ty-bg-success);\n}\n\nbutton.filled-outlined.success:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-success);\n}\n\n/* Accent */\nbutton.accent.success {\n  background: var(--ty-accent-success);\n}\n\nbutton.accent.success:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-success);\n}\n\n/* Filled */\nbutton.filled.success {\n  background: var(--ty-bg-success);\n  color: var(--ty-color-success);\n}\n\nbutton.filled.success:hover:not(:disabled) {\n  background: var(--ty-bg-success-mild);\n}\n\n/* Outlined */\nbutton.outlined.success {\n  color: var(--ty-color-success);\n  border-color: var(--ty-color-success);\n}\n\nbutton.outlined.success:hover:not(:disabled) {\n  background: var(--ty-bg-success-soft);\n}\n\n/* Plain */\nbutton.plain.success {\n  color: var(--ty-color-success);\n}\n\nbutton.plain.success:hover:not(:disabled) {\n  background: var(--ty-bg-success-soft);\n}\n\n/* ----- DANGER FLAVOR ----- */\n\n/* Filled + Outlined (default) */\nbutton.filled-outlined.danger {\n  background: var(--ty-bg-danger);\n  color: var(--ty-color-danger);\n  border-color: var(--ty-border-danger);\n}\n\nbutton.filled-outlined.danger:hover:not(:disabled) {\n  background: var(--ty-bg-danger-mild);\n}\n\nbutton.filled-outlined.danger:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-danger);\n}\n\n/* Accent */\nbutton.accent.danger {\n  background: var(--ty-accent-danger);\n}\n\nbutton.accent.danger:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-danger);\n}\n\n/* Filled */\nbutton.filled.danger {\n  background: var(--ty-bg-danger);\n  color: var(--ty-color-danger);\n}\n\nbutton.filled.danger:hover:not(:disabled) {\n  background: var(--ty-bg-danger-mild);\n}\n\n/* Outlined */\nbutton.outlined.danger {\n  color: var(--ty-color-danger);\n  border-color: var(--ty-color-danger);\n}\n\nbutton.outlined.danger:hover:not(:disabled) {\n  background: var(--ty-bg-danger-soft);\n}\n\n/* Plain */\nbutton.plain.danger {\n  color: var(--ty-color-danger);\n}\n\nbutton.plain.danger:hover:not(:disabled) {\n  background: var(--ty-bg-danger-soft);\n}\n\n/* ----- WARNING FLAVOR ----- */\n\n/* Filled + Outlined (default) */\nbutton.filled-outlined.warning {\n  background: var(--ty-bg-warning);\n  color: var(--ty-color-warning);\n  border-color: var(--ty-border-warning);\n}\n\nbutton.filled-outlined.warning:hover:not(:disabled) {\n  background: var(--ty-bg-warning-mild);\n}\n\nbutton.filled-outlined.warning:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-warning);\n}\n\n/* Accent */\nbutton.accent.warning {\n  background: var(--ty-accent-warning);\n}\n\nbutton.accent.warning:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-warning);\n}\n\n/* Filled */\nbutton.filled.warning {\n  background: var(--ty-bg-warning);\n  color: var(--ty-color-warning);\n}\n\nbutton.filled.warning:hover:not(:disabled) {\n  background: var(--ty-bg-warning-mild);\n}\n\n/* Outlined */\nbutton.outlined.warning {\n  color: var(--ty-color-warning);\n  border-color: var(--ty-color-warning);\n}\n\nbutton.outlined.warning:hover:not(:disabled) {\n  background: var(--ty-bg-warning-soft);\n}\n\n/* Plain */\nbutton.plain.warning {\n  color: var(--ty-color-warning);\n}\n\nbutton.plain.warning:hover:not(:disabled) {\n  background: var(--ty-bg-warning-soft);\n}\n\n/* ----- NEUTRAL FLAVOR ----- */\n\n/* Filled + Outlined (default) */\nbutton.filled-outlined.neutral {\n  background: var(--ty-bg-neutral);\n  color: var(--ty-color-neutral);\n  border-color: var(--ty-border-neutral);\n}\n\nbutton.filled-outlined.neutral:hover:not(:disabled) {\n  background: var(--ty-bg-neutral-mild);\n}\n\nbutton.filled-outlined.neutral:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-neutral);\n}\n\n/* Accent */\nbutton.accent.neutral {\n  background: var(--ty-accent-neutral);\n}\n\nbutton.accent.neutral:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-neutral);\n}\n\n/* Filled */\nbutton.filled.neutral {\n  background: var(--ty-bg-neutral);\n  color: var(--ty-color-neutral);\n}\n\nbutton.filled.neutral:hover:not(:disabled) {\n  background: var(--ty-bg-neutral-mild);\n}\n\n/* Outlined */\nbutton.outlined.neutral {\n  color: var(--ty-color-neutral);\n  border-color: var(--ty-color-neutral);\n}\n\nbutton.outlined.neutral:hover:not(:disabled) {\n  background: var(--ty-bg-neutral-soft);\n}\n\n/* Plain */\nbutton.plain.neutral {\n  color: var(--ty-color-neutral);\n}\n\nbutton.plain.neutral:hover:not(:disabled) {\n  background: var(--ty-bg-neutral-soft);\n}\n";
//# sourceMappingURL=button.d.ts.map