/**
 * _Buttons
 *
 * Shared button system with variants, states, and accessibility support.
 * Variants are driven by CSS custom properties to minimize duplicated rules.
 *
 * @package    SmartCycleDiscounts
 * @subpackage SmartCycleDiscounts/resources/assets/css/shared/_buttons.css
 * @author     Webstepper.io <contact@webstepper.io>
 * @copyright  2025 Webstepper.io
 * @license    GPL-3.0-or-later https://www.gnu.org/licenses/gpl-3.0.html
 * @link       https://webstepper.io/wordpress/plugins/smart-cycle-discounts/
 * @since      1.0.0
 */

/* ==========================================================================
   Base
   ========================================================================== */

.wsscd-button {
	--wsscd-button-bg: var(--wsscd-color-surface);
	--wsscd-button-border: var(--wsscd-color-border);
	--wsscd-button-color: var(--wsscd-color-text);
	--wsscd-button-hover-bg: var(--wsscd-color-surface-alt);
	--wsscd-button-hover-border: var(--wsscd-color-border-dark);
	--wsscd-button-hover-color: var(--wsscd-color-text);
	--wsscd-button-focus-ring: var(--wsscd-ring-focus);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wsscd-gap-tight);
	min-height: var(--wsscd-button-height);
	margin: 0;
	padding: 6px 10px;
	box-sizing: border-box;
	border: 1px solid var(--wsscd-button-border);
	border-radius: var(--wsscd-radius-md);
	background: var(--wsscd-button-bg);
	color: var(--wsscd-button-color);
	font-family: inherit;
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-semibold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	appearance: none;
	transition: background-color var(--wsscd-transition-fast) ease,
		border-color var(--wsscd-transition-fast) ease,
		box-shadow var(--wsscd-transition-fast) ease,
		transform var(--wsscd-transition-fast) ease;
}

a.wsscd-button:visited {
	color: var(--wsscd-button-color);
}

.wsscd-button:hover,
.wsscd-button:active {
	background: var(--wsscd-button-hover-bg);
	border-color: var(--wsscd-button-hover-border);
	color: var(--wsscd-button-hover-color);
	filter: none;
}

.wsscd-button:focus,
.wsscd-button:focus-visible {
	outline: 2px solid var(--wsscd-color-primary);
	outline-offset: 2px;
	box-shadow: var(--wsscd-button-focus-ring);
	color: var(--wsscd-button-color);
}

.wsscd-button:active {
	transform: translateY(1px);
}

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

.wsscd-button--large {
	min-height: var(--wsscd-button-height-large);
	padding: 6px 14px;
	font-size: var(--wsscd-font-size-medium);
}

.wsscd-button--small {
	min-height: var(--wsscd-button-height-small);
	padding: 4px 8px;
	font-size: var(--wsscd-font-size-small);
}

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

.wsscd-button--primary {
	--wsscd-button-bg: var(--wsscd-color-primary);
	--wsscd-button-border: var(--wsscd-color-primary);
	--wsscd-button-color: var(--wsscd-color-white);
	--wsscd-button-hover-bg: var(--wsscd-color-primary-dark);
	--wsscd-button-hover-border: var(--wsscd-color-primary-dark);
	--wsscd-button-hover-color: var(--wsscd-color-white);
}

.wsscd-button--secondary {
	--wsscd-button-bg: var(--wsscd-color-white);
	--wsscd-button-border: var(--wsscd-color-border);
	--wsscd-button-color: var(--wsscd-color-text);
	--wsscd-button-hover-bg: var(--wsscd-color-surface);
	--wsscd-button-hover-border: var(--wsscd-color-border-dark);
	--wsscd-button-hover-color: var(--wsscd-color-text);
}

.wsscd-button--success {
	--wsscd-button-bg: var(--wsscd-color-success);
	--wsscd-button-border: var(--wsscd-color-success);
	--wsscd-button-color: var(--wsscd-color-white);
	--wsscd-button-hover-bg: var(--wsscd-color-success-dark);
	--wsscd-button-hover-border: var(--wsscd-color-success-dark);
	--wsscd-button-hover-color: var(--wsscd-color-white);
	--wsscd-button-focus-ring: var(--wsscd-ring-success);
}

.wsscd-button--warning {
	--wsscd-button-bg: var(--wsscd-color-warning);
	--wsscd-button-border: var(--wsscd-color-warning);
	--wsscd-button-color: var(--wsscd-color-text-dark);
	--wsscd-button-hover-bg: var(--wsscd-color-warning-dark);
	--wsscd-button-hover-border: var(--wsscd-color-warning-dark);
	--wsscd-button-hover-color: var(--wsscd-color-text-dark);
	--wsscd-button-focus-ring: var(--wsscd-ring-warning);
	font-weight: var(--wsscd-font-weight-semibold);
}

.wsscd-button--danger {
	--wsscd-button-bg: var(--wsscd-color-danger);
	--wsscd-button-border: var(--wsscd-color-danger);
	--wsscd-button-color: var(--wsscd-color-white);
	--wsscd-button-hover-bg: var(--wsscd-color-danger-dark);
	--wsscd-button-hover-border: var(--wsscd-color-danger-dark);
	--wsscd-button-hover-color: var(--wsscd-color-white);
	--wsscd-button-focus-ring: var(--wsscd-ring-danger);
}

.wsscd-button--pro {
	--wsscd-button-bg: var(--wsscd-color-pro, #7c3aed);
	--wsscd-button-border: var(--wsscd-color-pro, #7c3aed);
	--wsscd-button-color: var(--wsscd-color-white);
	--wsscd-button-hover-bg: var(--wsscd-color-pro-dark, #5b21b6);
	--wsscd-button-hover-border: var(--wsscd-color-pro-dark, #5b21b6);
	--wsscd-button-hover-color: var(--wsscd-color-white);
	--wsscd-button-focus-ring: var(--wsscd-color-pro-alpha-25, rgba(124, 58, 237, 0.25));
}

.wsscd-button--pro:focus-visible {
	outline-color: var(--wsscd-color-pro, #7c3aed);
}

.wsscd-button--ghost {
	--wsscd-button-bg: transparent;
	--wsscd-button-border: var(--wsscd-color-border);
	--wsscd-button-color: var(--wsscd-color-text);
	--wsscd-button-hover-bg: var(--wsscd-color-primary-alpha-10);
	--wsscd-button-hover-border: var(--wsscd-color-primary);
	--wsscd-button-hover-color: var(--wsscd-color-text);
}

.wsscd-button--ghost-danger {
	--wsscd-button-bg: transparent;
	--wsscd-button-border: var(--wsscd-color-border);
	--wsscd-button-color: var(--wsscd-color-text-muted);
	--wsscd-button-hover-bg: var(--wsscd-color-danger-alpha-15);
	--wsscd-button-hover-border: var(--wsscd-color-danger);
	--wsscd-button-hover-color: var(--wsscd-color-danger);
	--wsscd-button-focus-ring: var(--wsscd-ring-danger);
}

.wsscd-button--ghost-danger:focus-visible {
	outline-color: var(--wsscd-color-danger);
}

.wsscd-button--ghost-danger .wsscd-icon {
	color: var(--wsscd-color-text-muted);
	opacity: 0.6;
	transition: color var(--wsscd-transition-fast) ease,
		opacity var(--wsscd-transition-fast) ease;
}

.wsscd-button--ghost-danger:hover .wsscd-icon,
.wsscd-button--ghost-danger:active .wsscd-icon {
	color: var(--wsscd-color-danger);
	opacity: 1;
}

.wsscd-button--link {
	--wsscd-button-bg: transparent;
	--wsscd-button-border: transparent;
	--wsscd-button-color: var(--wsscd-color-primary);
	--wsscd-button-hover-bg: transparent;
	--wsscd-button-hover-border: transparent;
	--wsscd-button-hover-color: var(--wsscd-color-primary-dark);
	height: auto;
	min-height: 0;
	padding: var(--wsscd-spacing-xs) var(--wsscd-spacing-sm);
	border: none;
	box-shadow: none;
	font-weight: var(--wsscd-font-weight-medium);
	text-decoration: none;
}

.wsscd-button--link:hover,
.wsscd-button--link:active {
	text-decoration: underline;
}

.wsscd-button--link:focus-visible {
	outline: 2px solid var(--wsscd-color-primary-alpha-30);
	outline-offset: 1px;
	border-radius: var(--wsscd-radius-sm);
}

/* ==========================================================================
   States
   ========================================================================== */

.wsscd-button:disabled,
.wsscd-button[aria-disabled='true'] {
	background-color: var(--wsscd-color-bg-disabled);
	border-color: var(--wsscd-color-border-disabled);
	color: var(--wsscd-color-text-disabled);
	box-shadow: none;
	cursor: not-allowed;
	pointer-events: none;
}

.wsscd-button--secondary:disabled,
.wsscd-button--secondary[aria-disabled='true'],
.wsscd-button--ghost:disabled,
.wsscd-button--ghost[aria-disabled='true'],
.wsscd-button--ghost-danger:disabled,
.wsscd-button--ghost-danger[aria-disabled='true'],
.wsscd-button--link:disabled,
.wsscd-button--link[aria-disabled='true'] {
	background-color: transparent;
	border-color: var(--wsscd-color-border-disabled);
	color: var(--wsscd-color-text-disabled);
}

.wsscd-button--link:disabled,
.wsscd-button--link[aria-disabled='true'] {
	border-color: transparent;
}

.wsscd-button--loading {
	position: relative;
	color: transparent !important;
	cursor: wait;
	pointer-events: none;
}

.wsscd-button--loading .wsscd-icon {
	visibility: hidden;
}

.wsscd-button--loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--wsscd-icon-small, 16px);
	height: var(--wsscd-icon-small, 16px);
	margin-top: calc(var(--wsscd-icon-small, 16px) / -2);
	margin-left: calc(var(--wsscd-icon-small, 16px) / -2);
	border: 2px solid var(--wsscd-color-white, #fff);
	border-top-color: transparent;
	border-radius: 50%;
	animation: wsscd-button-spin 0.65s linear infinite;
	z-index: 1;
}

.wsscd-button--secondary.wsscd-button--loading::after,
.wsscd-button--ghost.wsscd-button--loading::after,
.wsscd-button--ghost-danger.wsscd-button--loading::after,
.wsscd-button--link.wsscd-button--loading::after {
	border-color: var(--wsscd-color-primary);
	border-top-color: transparent;
}

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

/* ==========================================================================
   Groups
   ========================================================================== */

.wsscd-button-group {
	display: inline-flex;
	gap: var(--wsscd-spacing-sm);
}

/* ==========================================================================
   Icons
   ========================================================================== */

.wsscd-button .wsscd-icon {
	width: var(--wsscd-icon-small);
	height: var(--wsscd-icon-small);
}

.wsscd-button--small .wsscd-icon {
	width: var(--wsscd-icon-xs);
	height: var(--wsscd-icon-xs);
}

.wsscd-button--large .wsscd-icon {
	width: var(--wsscd-icon-medium);
	height: var(--wsscd-icon-medium);
}

.wsscd-button--icon-only {
	width: var(--wsscd-button-icon-size);
	min-width: var(--wsscd-button-icon-size);
	height: var(--wsscd-button-icon-size);
	padding: 0;
	gap: 0;
}

.wsscd-button--icon-only.wsscd-button--small {
	width: var(--wsscd-button-height-small);
	min-width: var(--wsscd-button-height-small);
	height: var(--wsscd-button-height-small);
}

.wsscd-button--icon-only.wsscd-button--large {
	width: var(--wsscd-button-icon-size-large);
	min-width: var(--wsscd-button-icon-size-large);
	height: var(--wsscd-button-icon-size-large);
}

/* ==========================================================================
   Wizard navigation
   ========================================================================== */

.wp-core-ui .wsscd-nav-btn--previous,
.wp-core-ui .wsscd-nav-btn--next,
.wp-core-ui .wsscd-nav-btn--complete,
.wp-core-ui .wsscd-nav-btn--draft {
	padding: var(--wsscd-spacing-sm) var(--wsscd-spacing-base);
}

.wp-core-ui .wsscd-nav-btn--complete {
	padding: var(--wsscd-spacing-sm) var(--wsscd-spacing-lg);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wsscd-button {
		transition: none;
	}

	.wsscd-button:active {
		transform: none;
	}

	.wsscd-button--loading::after {
		animation-duration: 1.5s;
	}
}