/**
 * Button Component Styles
 * PORTED FROM: clj/ty/components/button.css
 * Maintains full compatibility with ClojureScript version
 */
export const buttonStyles = `
:host {
  display: inline-block;
  font-family: var(--ty-font-sans);
}

:host([wide="true"]) {
  display: flex;
  flex-grow: 1;
}

button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ty-spacing-1);
  /* Base styles */
  font-size: var(--ty-font-xs);
  font-weight: var(--ty-font-medium);
  cursor: pointer;
  user-select: none;
  transition: var(--ty-transition-all);
  /* Default appearance */
  background: var(--ty-bg-neutral);
  color: var(--ty-color-neutral);
  border: 1px solid var(--ty-border-neutral);
}

button:not(.pill) {
  border-radius: var(--ty-radius-md);
}

/* Slot styling */
::slotted(*) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ensure icons in slots are sized appropriately */
::slotted(ty-icon) {
  flex-shrink: 0;
}

/* Button text */
.button-text:empty {
  display: none;
}

button.action.lg,
button.action.xl {
  height: 2.5rem;
  width: 2.5rem;
}

button.action.lg ::slotted(ty-icon),
button.action.xl ::slotted(ty-icon) {
  height: 1.5rem;
  width: 1.5rem;
}

button.action {
  align-items: center;
  justify-content: center;
  gap: 0px !important;
  height: 2rem;
  width: 2rem;
  padding: 0px !important;
}

button.action ::slotted(ty-icon) {
  height: 1.25rem;
  width: 1.25rem;
}

button.action.sm,
button.action.xs {
  height: 1.5rem;
  width: 1.5rem;
}

button.action.sm ::slotted(ty-icon),
button.action.xs ::slotted(ty-icon) {
  height: 0.75rem;
  width: 0.75rem;
}

/* Base interaction states */
button:hover:not(:disabled) {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15), 0 1px 6px rgba(0, 0, 0, 0.1);
}

button:active:not(:disabled) {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

button:focus-visible {
  outline: none;
}

/* Disabled state */
button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

:host([wide="true"]) button {
  flex-grow: 1;
}

/* ===== SIZE MODIFIERS ===== */

/* Extra Small */
button.xs {
  padding: 0px var(--ty-spacing-1);
  font-size: var(--ty-font-xs);
  gap: var(--ty-spacing-1);
  min-height: 1.3rem;
  min-width: 1.3rem;
}

/* Small */
button.sm {
  padding: 0px var(--ty-spacing-1);
  font-size: var(--ty-font-sm);
  gap: var(--ty-spacing-1);
  min-height: 1.6rem;
  min-width: 1.6rem;
}

/* Medium (default) */
button.md {
  padding: 0px var(--ty-spacing-2);
  font-size: var(--ty-font-base);
  gap: var(--ty-spacing-1);
  min-height: 2rem;
  min-width: 2rem;
}

/* Large */
button.lg {
  padding: 0px var(--ty-spacing-4);
  font-size: var(--ty-font-lg);
  gap: var(--ty-spacing-2);
  min-height: 3rem;
  min-width: 3rem;
}

/* Extra Large */
button.xl {
  padding: 0px var(--ty-spacing-6);
  font-size: var(--ty-font-xl);
  gap: var(--ty-spacing-3);
  min-height: 4rem;
  min-width: 4rem;
}

/* ===== PILL MODIFIER ===== */

/* Base pill style */
button.pill {
  border-radius: 9999px;
  /* Adjust horizontal padding for better pill shape */
  padding-left: 1.25em;
  padding-right: 1.25em;
}

/* Size-specific pill adjustments */
button.pill.xs {
  padding-left: 1em;
  padding-right: 1em;
}

button.pill.sm {
  padding-left: 1.125em;
  padding-right: 1.125em;
}

button.pill.lg {
  padding-left: 1.5em;
  padding-right: 1.5em;
}

button.pill.xl {
  padding-left: 1.75em;
  padding-right: 1.75em;
}

/* Icon-only pill buttons (circular) */
button.pill:has(ty-icon:only-child),
button.pill:has(slot[name="start"]:only-child),
button.pill:has(slot[name="end"]:only-child) {
  /* Make it circular */
  padding: 0;
  aspect-ratio: 1;
  min-width: var(--ty-size-md);
}

/* Size-specific circular pills */
button.pill.xs:has(ty-icon:only-child) {
  min-width: 2rem;
  min-height: 2rem;
}

button.pill.sm:has(ty-icon:only-child) {
  min-width: 2.25rem;
  min-height: 2.25rem;
}

button.pill.md:has(ty-icon:only-child) {
  min-width: 2.5rem;
  min-height: 2.5rem;
}

button.pill.lg:has(ty-icon:only-child) {
  min-width: 3rem;
  min-height: 3rem;
}

button.pill.xl:has(ty-icon:only-child) {
  min-width: 3.5rem;
  min-height: 3.5rem;
}

/* Accent - Full colored background with white text */
button.accent {
  color: white;
  border: none;
}

/* Filled - Tonal background, no border */
button.filled {
  border: none;
}

/* Outlined - Transparent background with border */
button.outlined {
  background: transparent;
}

/* Plain - Text only, no background or border */
button.plain {
  background: transparent;
  border: none;
}

/* Plain specific hover - remove shadow */
button.plain:hover:not(:disabled) {
  box-shadow: none;
}

/* Plain specific active - remove shadow */
button.plain:active:not(:disabled) {
  box-shadow: none;
}

/* ----- PRIMARY FLAVOR ----- */

/* Filled + Outlined (default) */
button.filled-outlined.primary {
  background: var(--ty-bg-primary);
  color: var(--ty-color-primary);
  border-color: var(--ty-border-primary);
}

button.filled-outlined.primary:hover:not(:disabled) {
  background: var(--ty-bg-primary-mild);
}

button.filled-outlined.primary:focus-visible {
  box-shadow: 0 0 0 2px var(--ty-bg), 0 0 0 4px var(--ty-color-primary);
}

/* Accent */
button.accent.primary {
  background: var(--ty-accent-primary);
}

button.accent.primary:focus-visible {
  box-shadow: 0 0 0 2px var(--ty-bg), 0 0 0 4px var(--ty-color-primary);
}

/* Filled */
button.filled.primary {
  background: var(--ty-bg-primary);
  color: var(--ty-color-primary);
}

button.filled.primary:hover:not(:disabled) {
  background: var(--ty-bg-primary-mild);
}

/* Outlined */
button.outlined.primary {
  color: var(--ty-color-primary);
  border-color: var(--ty-color-primary);
}

button.outlined.primary:hover:not(:disabled) {
  background: var(--ty-bg-primary-soft);
}

/* Plain */
button.plain.primary {
  color: var(--ty-color-primary);
}

button.plain.primary:hover:not(:disabled) {
  background: var(--ty-bg-primary-soft);
}

/* ----- SECONDARY FLAVOR ----- */

/* Filled + Outlined (default) */
button.filled-outlined.secondary {
  background: var(--ty-bg-secondary);
  color: var(--ty-color-secondary);
  border-color: var(--ty-border-secondary);
}

button.filled-outlined.secondary:hover:not(:disabled) {
  background: var(--ty-bg-secondary-mild);
}

button.filled-outlined.secondary:focus-visible {
  box-shadow: 0 0 0 2px var(--ty-bg), 0 0 0 4px var(--ty-color-secondary);
}

/* Accent */
button.accent.secondary {
  background: var(--ty-accent-secondary);
}

button.accent.secondary:focus-visible {
  box-shadow: 0 0 0 2px var(--ty-bg), 0 0 0 4px var(--ty-color-secondary);
}

/* Filled */
button.filled.secondary {
  background: var(--ty-bg-secondary);
  color: var(--ty-color-secondary);
}

button.filled.secondary:hover:not(:disabled) {
  background: var(--ty-bg-secondary-mild);
}

/* Outlined */
button.outlined.secondary {
  color: var(--ty-color-secondary);
  border-color: var(--ty-color-secondary);
}

button.outlined.secondary:hover:not(:disabled) {
  background: var(--ty-bg-secondary-soft);
}

/* Plain */
button.plain.secondary {
  color: var(--ty-color-secondary);
}

button.plain.secondary:hover:not(:disabled) {
  background: var(--ty-bg-secondary-soft);
}

/* ----- SUCCESS FLAVOR ----- */

/* Filled + Outlined (default) */
button.filled-outlined.success {
  background: var(--ty-bg-success-soft);
  color: var(--ty-color-success);
  border-color: var(--ty-border-success);
}

button.filled-outlined.success:hover:not(:disabled) {
  background: var(--ty-bg-success);
}

button.filled-outlined.success:focus-visible {
  box-shadow: 0 0 0 2px var(--ty-bg), 0 0 0 4px var(--ty-color-success);
}

/* Accent */
button.accent.success {
  background: var(--ty-accent-success);
}

button.accent.success:focus-visible {
  box-shadow: 0 0 0 2px var(--ty-bg), 0 0 0 4px var(--ty-color-success);
}

/* Filled */
button.filled.success {
  background: var(--ty-bg-success);
  color: var(--ty-color-success);
}

button.filled.success:hover:not(:disabled) {
  background: var(--ty-bg-success-mild);
}

/* Outlined */
button.outlined.success {
  color: var(--ty-color-success);
  border-color: var(--ty-color-success);
}

button.outlined.success:hover:not(:disabled) {
  background: var(--ty-bg-success-soft);
}

/* Plain */
button.plain.success {
  color: var(--ty-color-success);
}

button.plain.success:hover:not(:disabled) {
  background: var(--ty-bg-success-soft);
}

/* ----- DANGER FLAVOR ----- */

/* Filled + Outlined (default) */
button.filled-outlined.danger {
  background: var(--ty-bg-danger);
  color: var(--ty-color-danger);
  border-color: var(--ty-border-danger);
}

button.filled-outlined.danger:hover:not(:disabled) {
  background: var(--ty-bg-danger-mild);
}

button.filled-outlined.danger:focus-visible {
  box-shadow: 0 0 0 2px var(--ty-bg), 0 0 0 4px var(--ty-color-danger);
}

/* Accent */
button.accent.danger {
  background: var(--ty-accent-danger);
}

button.accent.danger:focus-visible {
  box-shadow: 0 0 0 2px var(--ty-bg), 0 0 0 4px var(--ty-color-danger);
}

/* Filled */
button.filled.danger {
  background: var(--ty-bg-danger);
  color: var(--ty-color-danger);
}

button.filled.danger:hover:not(:disabled) {
  background: var(--ty-bg-danger-mild);
}

/* Outlined */
button.outlined.danger {
  color: var(--ty-color-danger);
  border-color: var(--ty-color-danger);
}

button.outlined.danger:hover:not(:disabled) {
  background: var(--ty-bg-danger-soft);
}

/* Plain */
button.plain.danger {
  color: var(--ty-color-danger);
}

button.plain.danger:hover:not(:disabled) {
  background: var(--ty-bg-danger-soft);
}

/* ----- WARNING FLAVOR ----- */

/* Filled + Outlined (default) */
button.filled-outlined.warning {
  background: var(--ty-bg-warning);
  color: var(--ty-color-warning);
  border-color: var(--ty-border-warning);
}

button.filled-outlined.warning:hover:not(:disabled) {
  background: var(--ty-bg-warning-mild);
}

button.filled-outlined.warning:focus-visible {
  box-shadow: 0 0 0 2px var(--ty-bg), 0 0 0 4px var(--ty-color-warning);
}

/* Accent */
button.accent.warning {
  background: var(--ty-accent-warning);
}

button.accent.warning:focus-visible {
  box-shadow: 0 0 0 2px var(--ty-bg), 0 0 0 4px var(--ty-color-warning);
}

/* Filled */
button.filled.warning {
  background: var(--ty-bg-warning);
  color: var(--ty-color-warning);
}

button.filled.warning:hover:not(:disabled) {
  background: var(--ty-bg-warning-mild);
}

/* Outlined */
button.outlined.warning {
  color: var(--ty-color-warning);
  border-color: var(--ty-color-warning);
}

button.outlined.warning:hover:not(:disabled) {
  background: var(--ty-bg-warning-soft);
}

/* Plain */
button.plain.warning {
  color: var(--ty-color-warning);
}

button.plain.warning:hover:not(:disabled) {
  background: var(--ty-bg-warning-soft);
}

/* ----- NEUTRAL FLAVOR ----- */

/* Filled + Outlined (default) */
button.filled-outlined.neutral {
  background: var(--ty-bg-neutral);
  color: var(--ty-color-neutral);
  border-color: var(--ty-border-neutral);
}

button.filled-outlined.neutral:hover:not(:disabled) {
  background: var(--ty-bg-neutral-mild);
}

button.filled-outlined.neutral:focus-visible {
  box-shadow: 0 0 0 2px var(--ty-bg), 0 0 0 4px var(--ty-color-neutral);
}

/* Accent */
button.accent.neutral {
  background: var(--ty-accent-neutral);
}

button.accent.neutral:focus-visible {
  box-shadow: 0 0 0 2px var(--ty-bg), 0 0 0 4px var(--ty-color-neutral);
}

/* Filled */
button.filled.neutral {
  background: var(--ty-bg-neutral);
  color: var(--ty-color-neutral);
}

button.filled.neutral:hover:not(:disabled) {
  background: var(--ty-bg-neutral-mild);
}

/* Outlined */
button.outlined.neutral {
  color: var(--ty-color-neutral);
  border-color: var(--ty-color-neutral);
}

button.outlined.neutral:hover:not(:disabled) {
  background: var(--ty-bg-neutral-soft);
}

/* Plain */
button.plain.neutral {
  color: var(--ty-color-neutral);
}

button.plain.neutral:hover:not(:disabled) {
  background: var(--ty-bg-neutral-soft);
}
`;
//# sourceMappingURL=button.js.map