/**
 * Button Components - Modern CSS with Container Queries
 * Conversion-optimized, accessible, mobile-first
 */

/* ========================================
   Base Button Component
   ======================================== */

.bouw-btn {
	/* Layout & sizing */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	min-height: var(--cta-height-base);
	padding-inline: var(--cta-padding-x);
	padding-block: var(--cta-padding-y);

	/* Typography */
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 600;
	line-height: var(--leading-tight);
	text-decoration: none;
	white-space: nowrap;

	/* Styling */
	border: 2px solid transparent;
	border-radius: var(--radius-lg);
	cursor: pointer;
	user-select: none;
	position: relative;
	overflow: hidden;
	isolation: isolate;

	/* Animations */
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		color var(--transition-fast),
		transform var(--transition-fast),
		box-shadow var(--transition-fast);

	/* Focus styles */
	&:focus-visible {
		outline: none;
		box-shadow: var(--focus-ring);
	}

	/* Hover transform */
	&:hover {
		transform: translateY(-1px);
	}

	/* Active state */
	&:active {
		transform: translateY(0);
	}

	/* Disabled state */
	&:disabled,
	&[aria-disabled="true"] {
		opacity: 0.6;
		cursor: not-allowed;
		transform: none !important;
	}

	/* Container query for responsive sizing */
	@container (max-width: 400px) {
		min-height: var(--cta-height-sm);
		font-size: var(--text-sm);
		padding-inline: var(--space-md);
	}
}

/* ========================================
   Button Variants
   ======================================== */

/* Primary CTA - Conversion focused */
.bouw-btn--primary {
	background: var(--cta-primary);
	color: white;
	border-color: var(--cta-primary);

	&:hover {
		background: var(--cta-primary-hover);
		border-color: var(--cta-primary-hover);
		box-shadow: var(--shadow-md);
	}

	&:active {
		background: var(--cta-primary-active);
		border-color: var(--cta-primary-active);
	}

	&:focus-visible {
		box-shadow: var(--focus-ring-error);
	}
}

/* Secondary - Brand colors */
.bouw-btn--secondary {
	background: var(--primary);
	color: white;
	border-color: var(--primary);

	&:hover {
		background: color-mix(in srgb, var(--primary) 90%, black);
		border-color: color-mix(in srgb, var(--primary) 90%, black);
		box-shadow: var(--shadow-md);
	}

	&:focus-visible {
		box-shadow: var(--focus-ring);
	}
}

/* Outline - Lower hierarchy */
.bouw-btn--outline {
	background: transparent;
	color: var(--primary);
	border-color: var(--primary);

	&:hover {
		background: var(--primary);
		color: white;
	}

	&:focus-visible {
		box-shadow: var(--focus-ring);
	}
}

/* Ghost - Minimal */
.bouw-btn--ghost {
	background: transparent;
	color: var(--neutral-700);
	border-color: transparent;

	&:hover {
		background: var(--neutral-100);
		color: var(--neutral-900);
	}
}

/* Success state */
.bouw-btn--success {
	background: var(--success);
	color: white;
	border-color: var(--success);

	&:hover {
		background: color-mix(in srgb, var(--success) 90%, black);
		border-color: color-mix(in srgb, var(--success) 90%, black);
	}

	&:focus-visible {
		box-shadow: var(--focus-ring-success);
	}
}

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

.bouw-btn--sm {
	min-height: var(--cta-height-sm);
	font-size: var(--text-sm);
	padding-inline: var(--space-md);
	padding-block: var(--space-xs);
}

.bouw-btn--lg {
	min-height: var(--cta-height-lg);
	font-size: var(--text-lg);
	padding-inline: var(--space-2xl);
	padding-block: var(--space-md);
}

.bouw-btn--full {
	width: 100%;
}

/* ========================================
   Button Loading States
   ======================================== */

.bouw-btn--loading {
	color: transparent;
	pointer-events: none;

	&::after {
		content: '';
		position: absolute;
		inset: 0;
		background: inherit;
		border-radius: inherit;
	}

	&::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 1rem;
		height: 1rem;
		margin: -0.5rem;
		border: 2px solid currentColor;
		border-top-color: transparent;
		border-radius: 50%;
		color: white;
		animation: spin 1s linear infinite;
		z-index: 1;
	}
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* ========================================
   Icon Buttons
   ======================================== */

.bouw-btn--icon-only {
	min-width: var(--cta-height-base);
	padding: var(--space-xs);
	border-radius: var(--radius-md);

	&.bouw-btn--sm {
		min-width: var(--cta-height-sm);
	}

	&.bouw-btn--lg {
		min-width: var(--cta-height-lg);
	}
}

/* Icon positioning */
.bouw-btn svg {
	width: 1.25em;
	height: 1.25em;
	flex-shrink: 0;
}

.bouw-btn--icon-left {
	flex-direction: row;
}

.bouw-btn--icon-right {
	flex-direction: row-reverse;
}

/* ========================================
   Special Effects (Optional)
   ======================================== */

/* Ripple effect */
.bouw-btn--ripple {
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		border-radius: 50%;
		background: var(--glass-bg, rgba(255, 255, 255, 0.5));
		transform: translate(-50%, -50%);
		transition: width 0.3s, height 0.3s;
		pointer-events: none;
	}

	&:active::before {
		width: 300px;
		height: 300px;
	}
}

/* Gradient effect */
.bouw-btn--gradient {
	background: linear-gradient(135deg, var(--cta-primary), var(--primary));
	border-color: transparent;

	&:hover {
		background: linear-gradient(135deg, var(--cta-primary-hover), color-mix(in srgb, var(--primary) 90%, black));
	}
}

/* ========================================
   Accessibility Enhancements
   ======================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
	.bouw-btn {
		border-width: 3px;
	}

	.bouw-btn--outline,
	.bouw-btn--ghost {
		border-color: currentColor;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.bouw-btn {
		transition: none;

		&:hover {
			transform: none;
		}
	}

	.bouw-btn--loading::before {
		animation: none;
	}
}

/* Print styles */
@media print {
	.bouw-btn {
		border: 1px solid currentColor;
		box-shadow: none;
		transform: none !important;
	}
}