/**
 * Button Component
 * ============================================================================
 * Base button styles and variants for the SSA theme.
 *
 * Load order: After 01-base.css, before page-specific styles
 * Dependencies: 00-tokens.css (design tokens)
 *
 * NOTE: Panel-specific button overrides remain in panel CSS files
 * (e.g., .video-logo-panel .button, .courses-panel .button)
 * ============================================================================
 */

/* Base button styles */
.button {
	align-items: center;
	border: 0;
	border-radius: var(--radius-xl);
	cursor: pointer;
	display: flex;
	font-family: Poppins, sans-serif;
	font-weight: 400;
	height: 48px;
	justify-content: center;
	margin: 0 auto;
	min-width: 150px;
	padding: 0 34px;
	text-decoration: none;
	transition: 0.3s all ease;
	width: fit-content;
}

/* Outline variant - transparent with border */
.button.outline {
	background: transparent;
	border: 1px solid currentcolor;
	color: var(--brand-main);
}

/* Highlight variant - accent green background */
.button.highlight {
	background-color: var(--brand-highlight);
	color: var(--text-on-brand-highlight);
	margin: var(--space-0);
}

/* Blue variant - brand color background */
.button.blue {
	background-color: var(--brand-main);
	color: var(--white);
	margin: var(--space-0);
	width: 100%;
}

/* Utility modifier for fit-content width */
.button.fit-content {
	width: fit-content;
}

/* Widget-specific button styles */
.custom-html-widget a.highlight-link {
	color: var(--brand-highlight);
	font-size: 16px;
}

.custom-html-widget .button.highlight {
	/* Spacing when it has links above it */
	margin-top: 44px;
}

/* Modal button styles */
.modal .button {
	margin-top: 20px;
}