/**
 * Button Element Styles
 *
 * Custom button component for Bricks Builder.
 * Uses Design System variables from kuladu-variables.css
 *
 * @package KuLaDu
 */

/* ==========================================================================
   Button Element (Layout only - NO Typography!)
   ========================================================================== */

.kuladu-button {
	/* Reset for <button> elements */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: none;
	margin: 0;
	box-sizing: border-box;

	/* Base styles (Layout only) */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	text-decoration: none;
	border-radius: var(--radius-md);
	border: 2px solid transparent;
	cursor: pointer;
	transition: all 0.3s ease;
	white-space: nowrap;
	vertical-align: middle;

	/* Typography - Fixed line-height for consistent button heights */
	line-height: 1.5rem; /* 24px - ensures consistent height */
	font-weight: 600;
	font-size: var(--font-size-base); /* 16px */

	/* Default Padding (Medium Size - 40px total height) */
	/* Calculation: (40px - 24px line-height) / 2 = 8px vertical */
	padding: 0.5rem 1.5rem; /* 8px vertical, 24px horizontal */
	min-height: 2.5rem; /* 40px */
}

/* Button Variants */

/* Primary - Green with Dark Text */
.kuladu-button--primary {
	background: var(--color-primary-400);
	color: var(--color-black);
	border-color: var(--color-black);
	box-shadow: var(--shadow-hard-sm);
}

.kuladu-button--primary:hover {
	background: var(--color-primary-500);
	color: var(--color-black);
	border-color: var(--color-black);
	box-shadow: var(--shadow-hard-md);
}

.kuladu-button--primary:active {
	transform: translateY(0);
	box-shadow: var(--shadow-hard-sm);
}

/* Secondary - Yellow */
.kuladu-button--secondary {
	background: var(--color-secondary-500);
	color: var(--text-on-secondary);
	border-color: var(--color-black);
	box-shadow: var(--shadow-hard-sm);
}

.kuladu-button--secondary:hover {
	background: var(--color-secondary-600);
	border-color: var(--color-black);
	box-shadow: var(--shadow-hard-md);
}

.kuladu-button--secondary:active {
	transform: translateY(0);
	box-shadow: var(--shadow-hard-sm);
}

/* Tertiary - Orange */
.kuladu-button--tertiary {
	background: var(--color-tertiary-500);
	color: var(--color-black);
	border-color: var(--color-black);
	box-shadow: var(--shadow-hard-sm);
}

.kuladu-button--tertiary:hover {
	background: var(--color-tertiary-600);
	border-color: var(--color-black);
	box-shadow: var(--shadow-hard-md);
}

.kuladu-button--tertiary:active {
	transform: translateY(0);
	box-shadow: var(--shadow-hard-sm);
}

/* Light - Sand/Beige */
.kuladu-button--light {
	background: var(--color-sand-200);
	color: var(--color-black);
	border-color: var(--color-black);
	box-shadow: var(--shadow-hard-sm);
}

.kuladu-button--light:hover {
	background: var(--color-sand-300);
	color: var(--color-black);
	border-color: var(--color-black);
	box-shadow: var(--shadow-hard-md);
}

.kuladu-button--light:active {
	transform: translateY(0);
	box-shadow: var(--shadow-hard-sm);
}

/* Dark - Black/Dark Gray */
.kuladu-button--dark {
	background: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-black);
	box-shadow: var(--shadow-hard-sm);
}

.kuladu-button--dark:hover {
	background: var(--color-gray-900);
	color: var(--color-white);
	border-color: var(--color-black);
	box-shadow: var(--shadow-hard-md);
}

.kuladu-button--dark:active {
	transform: translateY(0);
	box-shadow: var(--shadow-hard-sm);
}

.kuladu-button--outline {
	background: transparent;
	color: var(--color-black);
	border-color: var(--color-black);
}

.kuladu-button--outline:hover {
	background: var(--color-gray-100);
	border-color: var(--color-black);
	color: var(--color-black);
}

.kuladu-button--ghost {
	background: transparent;
	color: var(--color-black);
	border-color: transparent;
	padding-left: 0;
	padding-right: 0;
}

.kuladu-button--ghost:hover {
	background: var(--color-gray-100);
	color: var(--color-black);
}

/* Button Sizes */

/* Small Button - 32px total height */
/* Calculation: (32px - 24px line-height) / 2 = 4px vertical */
.kuladu-button--sm {
	padding: 0.25rem .75rem; /* 4px vertical, 16px horizontal */
	min-height: 2rem; /* 32px */
	font-size: var(--font-size-sm); /* 14px */
}

/* Medium Button (Default) - 40px total height */
/* Calculation: (40px - 24px line-height) / 2 = 8px vertical */
.kuladu-button--md {
	padding: 0.5rem 1rem; /* 8px vertical, 24px horizontal */
	min-height: 2.5rem; /* 40px */
	font-size: var(--font-size-base); /* 16px */
}

/* Large Button - 48px total height */
/* Calculation: (48px - 24px line-height) / 2 = 12px vertical */
.kuladu-button--lg {
	padding: 0.75rem 1.5rem; /* 12px vertical, 32px horizontal */
	min-height: 3rem; /* 48px */
	font-size: var(--font-size-base); /* 18px */
}

/* Full Width */
.kuladu-button--full {
	width: 100%;
}

/* Icon Spacing */
.kuladu-button__icon {
	display: inline-flex;
	align-items: center;
	color: currentColor;
}

/* Force currentColor for all icon elements */
.kuladu-button__icon * {
	color: currentColor !important;
	fill: currentColor !important;
}

.kuladu-button__icon--before {
	margin-right: calc(var(--space-2) * -0.5);
}

.kuladu-button__icon--after {
	margin-left: calc(var(--space-2) * -0.5);
}

.kuladu-button__icon svg {
	height: 1.25rem; /* 20px */
	width: 1.25rem; /* 20px */
	flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Focus State (Accessibility) - Global focus style wird aus kuladu-typography.css übernommen */
.kuladu-button:focus {
	outline: none; /* Entferne Standard bei Maus-Klick */
}

.kuladu-button:focus-visible {
	outline: 2px solid #3333ff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px #fff, 0 0 0 6px #3333ff;
	border-radius: 2px;
}

/* Disabled State */
.kuladu-button:disabled,
.kuladu-button.is-disabled {
	opacity: var(--opacity-disabled);
	cursor: not-allowed;
	pointer-events: none;
}

/* Bricks Builder Specific Overrides */
.brxe-kuladu-button {
	/* Ensure Bricks wrapper doesn't interfere */
}

/* ==========================================================================
   Header-Specific Responsive Sizing
   ========================================================================== */

/**
 * Force small button size in header on mobile devices
 * Only affects buttons inside .brx-header (typically in navigation)
 * Uses !important to override explicit size classes like --md
 */
@media (max-width: 767px) {
	.brx-header .kuladu-button,
	.brx-header .kuladu-button--md,
	.brx-header .kuladu-button--lg {
		padding: 0.25rem 0.75rem !important; /* 4px vertical, 12px horizontal */
		min-height: 2rem !important; /* 32px */
		font-size: var(--font-size-sm) !important; /* 14px */
	}
}

/* ==========================================================================
   Responsive Button Size Modifiers
   ========================================================================== */

/**
 * Responsive size overrides for tablet and mobile breakpoints
 * These classes are added via Bricks controls and override the base size
 * Example: .kuladu-button--md .kuladu-button--mobile-sm
 */

/* Tablet Overrides (768px - 1024px) */
@media (max-width: 1024px) {
	.kuladu-button--tablet-sm {
		padding: 0.25rem 0.75rem !important; /* 4px vertical, 12px horizontal */
		min-height: 2rem !important; /* 32px */
		font-size: var(--font-size-sm) !important; /* 14px */
	}

	.kuladu-button--tablet-md {
		padding: 0.5rem 1rem !important; /* 8px vertical, 16px horizontal */
		min-height: 2.5rem !important; /* 40px */
		font-size: var(--font-size-base) !important; /* 16px */
	}

	.kuladu-button--tablet-lg {
		padding: 0.75rem 1.5rem !important; /* 12px vertical, 24px horizontal */
		min-height: 3rem !important; /* 48px */
		font-size: var(--font-size-base) !important; /* 16px */
	}
}

/* Mobile Overrides (< 768px) */
@media (max-width: 767px) {
	.kuladu-button--mobile-sm {
		padding: 0.25rem 0.75rem !important; /* 4px vertical, 12px horizontal */
		min-height: 2rem !important; /* 32px */
		font-size: var(--font-size-sm) !important; /* 14px */
	}

	.kuladu-button--mobile-md {
		padding: 0.5rem 1rem !important; /* 8px vertical, 16px horizontal */
		min-height: 2.5rem !important; /* 40px */
		font-size: var(--font-size-base) !important; /* 16px */
	}

	.kuladu-button--mobile-lg {
		padding: 0.75rem 1.5rem !important; /* 12px vertical, 24px horizontal */
		min-height: 3rem !important; /* 48px */
		font-size: var(--font-size-base) !important; /* 16px */
	}
}