/* Reset core button defaults */
.wp-block-button__link {
	background		: none;
	color			: inherit;
	border			: none;
	padding			: 0;
	border-radius	: 0;
	box-shadow		: none;
}
.editor-styles-wrapper .wp-element-button,
.editor-styles-wrapper .wp-block-button__link {
	background		: unset;
	color			: unset;
	border-width	: unset;
	padding			: unset;
}

/* ======================================================
	 Base button
====================================================== */
.btn-group {
	display			: flex;
	gap				: 0.75rem;
	justify-content	: space-between;
	margin-top		: 1.5rem;
}
.btn{
	display			: inline-flex;
	align-items		: center;
	gap				: 8px;
	padding			: 10px 16px !important;
	border-radius	: var(--button-border-radius) !important;
	font-weight		: 600 !important;
	font-size		: var(--paragraph-font-size) !important;
	font-family		: var(--font-hero) !important;
	text-transform	: uppercase;
	text-decoration	: none;
	border			: 2px solid transparent;
	transition		: background-color 0.18s ease,color 0.18s ease,border-color 0.18s ease,box-shadow 0.18s ease;
	cursor			: pointer;
	justify-content	: center;

	--dark			: var(--wp--preset--color--brand-dark);
	--light			: var(--wp--preset--color--brand-light);
	--neutral		: var(--wp--preset--color--light);
	--neutral		: #f2f4e2;
}
.btn * {
	background		: transparent;
}

/* why? because wordpress... */
:root :where(.wp-block-button .wp-block-button__link){
	border-radius	: var(--button-border-radius) !important;
	font-weight		: 600 !important;
	font-size		: var(--paragraph-font-size) !important;
	font-family		: var(--font-hero) !important;
}

/* Icons via :after should inherit colour */
.btn:after{
	margin-left		: 8px;
	font-size		: var(--paragraph-font-size);
	color			: inherit;
}

/* ======================================================
	 Intent classes (colour tokens only)
====================================================== */
/* Dark (for light backgrounds) */
.btn-dark{
	--btn-bg-primary			: var(--light);		--btn-bg-secondary			: transparent;
	--btn-text-primary			: var(--dark);		--btn-text-secondary		: var(--light);
	--btn-border-primary		: var(--light);		--btn-border-secondary		: var(--light);

	--btn-hover-bg-primary		: var(--neutral);	--btn-hover-bg-secondary	: transparent;
	--btn-hover-text-primary	: var(--dark);		--btn-hover-text-secondary	: var(--neutral);
	--btn-hover-border-primary	: var(--neutral);	--btn-hover-border-secondary: var(--neutral);
}

/* Light (for dark backgrounds) */
.btn-light{
	--btn-bg-primary			: var(--dark);		--btn-bg-secondary			: transparent;
	--btn-text-primary			: var(--neutral);	--btn-text-secondary		: var(--dark);
	--btn-border-primary		: var(--dark);		--btn-border-secondary		: var(--dark);

	--btn-hover-bg-primary		: var(--light);		--btn-hover-bg-secondary	: var(--dark);
	--btn-hover-text-primary	: var(--dark);		--btn-hover-text-secondary	: var(--neutral);
	--btn-hover-border-primary	: var(--light);		--btn-hover-border-secondary: var(--dark);
}

/* Accent */
.btn-accent{
	--btn-bg-primary			: var(--dark);		--btn-bg-secondary			: transparent;
	--btn-text-primary			: var(--neutral);	--btn-text-secondary		: var(--dark);
	--btn-border-primary		: var(--dark);		--btn-border-secondary		: var(--dark);

	--btn-hover-bg-primary		: var(--neutral);	--btn-hover-bg-secondary	: transparent;
	--btn-hover-text-primary	: var(--dark);		--btn-hover-text-secondary	: var(--neutral);
	--btn-hover-border-primary	: var(--neutral);	--btn-hover-border-secondary: var(--neutral);
}

/* ======================================================
	 Primary (solid)
====================================================== */
.btn-primary			{background:var(--btn-bg-primary);			color:var(--btn-text-primary);			border-color:var(--btn-border-primary);			}
.btn-primary:hover		{background:var(--btn-hover-bg-primary);	color:var(--btn-hover-text-primary);	border-color:var(--btn-hover-border-primary);	}

/* ======================================================
	 Secondary (outline)
====================================================== */
.btn-secondary			{background:var(--btn-bg-secondary);		color:var(--btn-text-secondary);		border-color:var(--btn-border-secondary);		}
.btn-secondary:hover	{background:var(--btn-hover-bg-secondary);	color:var(--btn-hover-text-secondary);	border-color:var(--btn-hover-border-secondary);	}

/* ======================================================
	 Translucent
====================================================== */
.btn-translucent{
	background		: color-mix(in srgb, var(--btn-bg) 18%, transparent);
	border-color	: var(--btn-border-secondary);
	backdrop-filter	: saturate(1.1) blur(2px);
	color			: var(--btn-text-secondary);
	text-shadow		: 0 1px 1px rgba(0,0,0,0.25);
}
.btn-translucent:hover	{
	background		: var(--btn-hover-bg-secondary);
	color			: var(--btn-hover-text-secondary);
	border-color	: var(--btn-hover-border-secondary);
	text-shadow		: none;
}

/* ======================================================
	 SVGs
====================================================== */
.btn-primary svg,
.btn-primary:hover svg,
.btn-secondary svg,
.btn-secondary:hover svg,
.btn-translucent svg{fill:currentColor;}

/* ======================================================
	 Accessibility
====================================================== */
.btn:focus-visible{
	outline			: 2px solid currentColor;
	outline-offset	: 3px;
}
.btn:disabled {
	opacity			: 0.5;
	cursor			: not-allowed;
}