/* 
 * SaasBuilder Front-End - Buttons Component
 */

/* Micro-interactions de base (Boutons génériques) */
.saasbuilder-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 24px;
	border-radius: var(--border-radius, 12px);
	background-color: var(--color-primary);
	color: #ffffff !important;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: var(--transition-smooth);
}

/* Hover centralisé : bascule vers l'apparence "au repos" de la variante outlined. */
.saasbuilder-btn:hover,
.saasbuilder-btn:focus {
	background-color: transparent;
	color: var(--color-primary) !important;
	border-color: var(--color-primary);
}

.saasbuilder-btn:active {
	transform: scale(0.95);
}

/* Secondary Button - Grey / Neutral */
.saasbuilder-btn-secondary {
	background-color: transparent;
	color: var(--color-text) !important;
	border: 1px solid var(--color-border);
}

/* Hover centralisé : bascule vers l'apparence "au repos" de la variante primaire (full). */
.saasbuilder-btn-secondary:hover,
.saasbuilder-btn-secondary:focus {
	background-color: var(--color-bg-secondary);
	border-color: var(--color-bg-secondary);
}

/* Accent Button - Uses admin-configured secondary color */
.saasbuilder-btn-accent {
	background-color: var(--color-secondary);
	color: #ffffff !important;
	border: 1px solid transparent;
}

.saasbuilder-btn-accent:hover,
.saasbuilder-btn-accent:focus {
	background-color: transparent;
	color: var(--color-secondary) !important;
	border-color: var(--color-secondary);
}

/* État désactivé (Disabled) — Formulaires non valides */
.saasbuilder-btn:disabled:not(.is-loading),
.saasbuilder-btn[disabled]:not(.is-loading) {
	opacity: 0.38 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
	filter: grayscale(40%) !important;
}

/* État de chargement (Loading State) */
.saasbuilder-btn.is-loading,
.saasbuilder-btn-submit.is-loading {
	cursor: wait !important;
	pointer-events: none !important;
	opacity: 0.92 !important;
	filter: none !important;
}

.saasbuilder-btn-loader {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.saasbuilder-spinner {
	width: 20px;
	height: 20px;
	animation: saasbuilder-spin 0.8s linear infinite;
	stroke-dasharray: 60;
	stroke-dashoffset: 20;
}

@keyframes saasbuilder-spin {
	100% { transform: rotate(360deg); }
}