/**
 * Bricks Form Button Styles
 *
 * Styles the native Bricks form submit button to match our custom button component.
 * Uses Design System variables from kuladu-variables.css
 *
 * @package KuLaDu
 */

/* ==========================================================================
   Form Submit Button - Match Custom Button Component
   ========================================================================== */

/**
 * Target Bricks form submit buttons
 * Selectors:
 * - .brxe-form button[type="submit"] - Bricks form submit button
 * - .bricks-form__submit - Alternative selector
 */

.brxe-form button[type="submit"],
.bricks-form__submit {
	/* Reset */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: none;
	margin: 0;
	box-sizing: border-box;

	/* Base styles (match .kuladu-button) */
	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) */
	padding: 0.5rem 1.5rem; /* 8px vertical, 24px horizontal */
	min-height: 2.5rem; /* 40px */

	/* Default Variant: Primary (Green) */
	background: var(--color-primary-400);
	color: var(--color-black);
	border-color: var(--color-black);
	box-shadow: var(--shadow-hard-sm);
}

.brxe-form button[type="submit"]:hover,
.bricks-form__submit:hover {
	background: var(--color-primary-500);
	color: var(--color-black);
	border-color: var(--color-black);
	box-shadow: var(--shadow-hard-md);
}

.brxe-form button[type="submit"]:active,
.bricks-form__submit:active {
	transform: translateY(0);
	box-shadow: var(--shadow-hard-sm);
}

/* Focus State (Accessibility) */
.brxe-form button[type="submit"]:focus,
.bricks-form__submit:focus {
	outline: none;
}

.brxe-form button[type="submit"]:focus-visible,
.bricks-form__submit: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 */
.brxe-form button[type="submit"]:disabled,
.bricks-form__submit:disabled {
	opacity: var(--opacity-disabled);
	cursor: not-allowed;
	pointer-events: none;
}

/* ==========================================================================
   Button Variants (via Bricks classes or custom data attributes)
   ========================================================================== */

/**
 * Usage: Add these classes to the form element's "CSS classes" field in Bricks:
 * - form-button--secondary
 * - form-button--tertiary
 * - form-button--light
 * - form-button--dark
 * - form-button--outline
 * - form-button--ghost
 */

/* Secondary - Yellow */
.form-button--secondary button[type="submit"] {
	background: var(--color-secondary-500);
	color: var(--text-on-secondary);
	border-color: var(--color-black);
	box-shadow: var(--shadow-hard-sm);
}

.form-button--secondary button[type="submit"]:hover {
	background: var(--color-secondary-600);
	border-color: var(--color-black);
	box-shadow: var(--shadow-hard-md);
}

.form-button--secondary button[type="submit"]:active {
	transform: translateY(0);
	box-shadow: var(--shadow-hard-sm);
}

/* Tertiary - Orange */
.form-button--tertiary button[type="submit"] {
	background: var(--color-tertiary-500);
	color: var(--color-black);
	border-color: var(--color-black);
	box-shadow: var(--shadow-hard-sm);
}

.form-button--tertiary button[type="submit"]:hover {
	background: var(--color-tertiary-600);
	border-color: var(--color-black);
	box-shadow: var(--shadow-hard-md);
}

.form-button--tertiary button[type="submit"]:active {
	transform: translateY(0);
	box-shadow: var(--shadow-hard-sm);
}

/* Light - Sand/Beige */
.form-button--light button[type="submit"] {
	background: var(--color-sand-200);
	color: var(--color-black);
	border-color: var(--color-black);
	box-shadow: var(--shadow-hard-sm);
}

.form-button--light button[type="submit"]:hover {
	background: var(--color-sand-300);
	color: var(--color-black);
	border-color: var(--color-black);
	box-shadow: var(--shadow-hard-md);
}

.form-button--light button[type="submit"]:active {
	transform: translateY(0);
	box-shadow: var(--shadow-hard-sm);
}

/* Dark - Black/Dark Gray */
.form-button--dark button[type="submit"] {
	background: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-black);
	box-shadow: var(--shadow-hard-sm);
}

.form-button--dark button[type="submit"]:hover {
	background: var(--color-gray-900);
	color: var(--color-white);
	border-color: var(--color-black);
	box-shadow: var(--shadow-hard-md);
}

.form-button--dark button[type="submit"]:active {
	transform: translateY(0);
	box-shadow: var(--shadow-hard-sm);
}

/* Outline */
.form-button--outline button[type="submit"] {
	background: transparent;
	color: var(--color-black);
	border-color: var(--color-black);
	box-shadow: none;
}

.form-button--outline button[type="submit"]:hover {
	background: var(--color-gray-100);
	border-color: var(--color-black);
	color: var(--color-black);
}

/* Ghost (Text only) */
.form-button--ghost button[type="submit"] {
	background: transparent;
	color: var(--color-black);
	border-color: transparent;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}

.form-button--ghost button[type="submit"]:hover {
	background: var(--color-gray-100);
	color: var(--color-black);
}

/* ==========================================================================
   Button Sizes
   ========================================================================== */

/**
 * Usage: Add these classes to the form element in Bricks:
 * - form-button--sm
 * - form-button--md (default)
 * - form-button--lg
 */

/* Small Button - 32px total height */
.form-button--sm button[type="submit"] {
	padding: 0.25rem 0.75rem; /* 4px vertical, 16px horizontal */
	min-height: 2rem; /* 32px */
	font-size: var(--font-size-sm); /* 14px */
}

/* Medium Button (Default) - 40px total height */
.form-button--md button[type="submit"] {
	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 */
.form-button--lg button[type="submit"] {
	padding: 0.75rem 1.5rem; /* 12px vertical, 32px horizontal */
	min-height: 3rem; /* 48px */
	font-size: var(--font-size-base); /* 18px */
}

/* Full Width */
.form-button--full button[type="submit"] {
	width: 100%;
}

/* ==========================================================================
   Bricks Native Button Styles Mapping
   ========================================================================== */

/**
 * Map Bricks' native button style dropdown (in Builder) to our button system.
 *
 * Bricks uses these classes on the submit button itself:
 * - bricks-background-primary (Primär)
 * - bricks-background-secondary (Sekundär)
 * - bricks-background-light (Leicht)
 * - bricks-background-dark (Dunkel)
 * - bricks-background-muted (Gedämpft)
 * - bricks-background-info (Info)
 * - bricks-background-success (Erfolg)
 * - bricks-background-warning (Warnung)
 * - bricks-background-danger (Gefahr)
 */

/* Primary (Primär) → Green */
button[type="submit"].bricks-background-primary {
	background: var(--color-primary-400) !important;
	color: var(--color-black) !important;
	border-color: var(--color-black) !important;
	box-shadow: var(--shadow-hard-sm) !important;
}

button[type="submit"].bricks-background-primary:hover {
	background: var(--color-primary-500) !important;
	box-shadow: var(--shadow-hard-md) !important;
}

button[type="submit"].bricks-background-primary:active {
	transform: translateY(0);
	box-shadow: var(--shadow-hard-sm) !important;
}

/* Secondary (Sekundär) → Yellow */
button[type="submit"].bricks-background-secondary {
	background: var(--color-secondary-500) !important;
	color: var(--color-black) !important;
	border-color: var(--color-black) !important;
	box-shadow: var(--shadow-hard-sm) !important;
}

button[type="submit"].bricks-background-secondary:hover {
	background: var(--color-secondary-600) !important;
	box-shadow: var(--shadow-hard-md) !important;
}

button[type="submit"].bricks-background-secondary:active {
	transform: translateY(0);
	box-shadow: var(--shadow-hard-sm) !important;
}

/* Light (Leicht) → Sand/Beige */
button[type="submit"].bricks-background-light {
	background: var(--color-sand-200) !important;
	color: var(--color-black) !important;
	border-color: var(--color-black) !important;
	box-shadow: var(--shadow-hard-sm) !important;
}

button[type="submit"].bricks-background-light:hover {
	background: var(--color-sand-300) !important;
	box-shadow: var(--shadow-hard-md) !important;
}

button[type="submit"].bricks-background-light:active {
	transform: translateY(0);
	box-shadow: var(--shadow-hard-sm) !important;
}

/* Dark (Dunkel) → Black */
button[type="submit"].bricks-background-dark {
	background: var(--color-black) !important;
	color: var(--color-white) !important;
	border-color: var(--color-black) !important;
	box-shadow: var(--shadow-hard-sm) !important;
}

button[type="submit"].bricks-background-dark:hover {
	background: var(--color-gray-900) !important;
	box-shadow: var(--shadow-hard-md) !important;
}

button[type="submit"].bricks-background-dark:active {
	transform: translateY(0);
	box-shadow: var(--shadow-hard-sm) !important;
}

/* Muted (Gedämpft) → Outline */
button[type="submit"].bricks-background-muted {
	background: transparent !important;
	color: var(--color-black) !important;
	border-color: var(--color-black) !important;
	box-shadow: none !important;
}

button[type="submit"].bricks-background-muted:hover {
	background: var(--color-gray-100) !important;
	border-color: var(--color-black) !important;
	color: var(--color-black) !important;
}

/* Success (Erfolg) → Success Colors (Semantic) */
button[type="submit"].bricks-background-success {
	background: var(--color-success-100) !important;
	color: var(--color-success-950) !important;
	border-color: var(--color-success-900) !important;
	box-shadow: 4px 4px 0 var(--color-success-900) !important;
}

button[type="submit"].bricks-background-success:hover {
	background: var(--color-success-200) !important;
	box-shadow: 6px 6px 0 var(--color-success-900) !important;
}

button[type="submit"].bricks-background-success:active {
	transform: translateY(0);
	box-shadow: 4px 4px 0 var(--color-success-900) !important;
}

/* Warning (Warnung) → Warning Colors (Semantic) */
button[type="submit"].bricks-background-warning {
	background: var(--color-warning-100) !important;
	color: var(--color-warning-950) !important;
	border-color: var(--color-warning-900) !important;
	box-shadow: 4px 4px 0 var(--color-warning-900) !important;
}

button[type="submit"].bricks-background-warning:hover {
	background: var(--color-warning-200) !important;
	box-shadow: 6px 6px 0 var(--color-warning-900) !important;
}

button[type="submit"].bricks-background-warning:active {
	transform: translateY(0);
	box-shadow: 4px 4px 0 var(--color-warning-900) !important;
}

/* Danger (Gefahr) → Error Colors (Semantic) */
button[type="submit"].bricks-background-danger {
	background: var(--color-error-100) !important;
	color: var(--color-error-950) !important;
	border-color: var(--color-error-900) !important;
	box-shadow: 4px 4px 0 var(--color-error-900) !important;
}

button[type="submit"].bricks-background-danger:hover {
	background: var(--color-error-200) !important;
	box-shadow: 6px 6px 0 var(--color-error-900) !important;
}

button[type="submit"].bricks-background-danger:active {
	transform: translateY(0);
	box-shadow: 4px 4px 0 var(--color-error-900) !important;
}

/* Info (Info) → Info Colors (Semantic) */
button[type="submit"].bricks-background-info {
	background: var(--color-info-100) !important;
	color: var(--color-info-950) !important;
	border-color: var(--color-info-900) !important;
	box-shadow: 4px 4px 0 var(--color-info-900) !important;
}

button[type="submit"].bricks-background-info:hover {
	background: var(--color-info-200) !important;
	box-shadow: 6px 6px 0 var(--color-info-900) !important;
}

button[type="submit"].bricks-background-info:active {
	transform: translateY(0);
	box-shadow: 4px 4px 0 var(--color-info-900) !important;
}

/* ==========================================================================
   Bricks Native Button Sizes Mapping
   ========================================================================== */

/**
 * Map Bricks' native button size dropdown to our button sizes.
 *
 * Bricks sizes (just the size name as class):
 * - Default (Standard) → md (40px)
 * - sm (Klein) → sm (32px)
 * - md (Mittel) → md (40px)
 * - lg (Groß) → lg (48px)
 * - xl (Extra groß) → lg (48px, same as large)
 */

/* Klein → Small (32px) */
button[type="submit"].sm {
	padding: 0.25rem 0.75rem !important; /* 4px vertical, 12px horizontal */
	min-height: 2rem !important; /* 32px */
	font-size: var(--font-size-sm) !important; /* 14px */
}

/* Mittel → Medium (40px) - same as default */
button[type="submit"].md {
	padding: 0.5rem 1.5rem !important; /* 8px vertical, 24px horizontal */
	min-height: 2.5rem !important; /* 40px */
	font-size: var(--font-size-base) !important; /* 16px */
}

/* Groß → Large (48px) */
button[type="submit"].lg {
	padding: 0.75rem 2rem !important; /* 12px vertical, 32px horizontal */
	min-height: 3rem !important; /* 48px */
	font-size: var(--font-size-base) !important; /* 18px */
}

/* Extra groß → Large (48px, same as Groß) */
button[type="submit"].xl {
	padding: 0.75rem 2rem !important; /* 12px vertical, 32px horizontal */
	min-height: 3rem !important; /* 48px */
	font-size: var(--font-size-base) !important; /* 18px */
}