/*
 * Shared button system — scoped under .bmx-btn. Reproduces the
 * reference's .btn-style-one (solid blue) / .btn-style-two (solid dark)
 * pill buttons, including the vertical text-swap + circular overlay
 * hover animation (assets/css/global.css .btn-style-one/.btn-style-two).
 * Enqueued site-wide since buttons appear in the header, hero, and
 * several content sections.
 */

.bmx-btn {
	position: relative;
	display: inline-block;
	overflow: hidden;
	text-align: center;
	padding: 18px 28px;
	border-radius: 50px;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 0;
	letter-spacing: 1px;
	color: var( --wp--preset--color--base );
	text-decoration: none;
	cursor: pointer;
}

.bmx-btn--one {
	background-color: var( --wp--preset--color--bmx-primary );
}

.bmx-btn--two {
	padding: 18px 30px;
	background-color: var( --wp--preset--color--bmx-heading );
}

.bmx-btn::before {
	content: '';
	position: absolute;
	top: -200%;
	left: 50%;
	width: 200%;
	height: 200%;
	transform: translateX( -50% );
	border-radius: 50%;
	z-index: 1;
	transition: top 800ms ease;
}

.bmx-btn--one::before {
	background-color: var( --wp--preset--color--bmx-heading );
}

.bmx-btn--two::before {
	background-color: var( --wp--preset--color--bmx-primary );
}

.bmx-btn:hover::before {
	top: -40%;
}

.bmx-btn__wrap {
	position: relative;
	z-index: 2;
	display: inline-block;
	overflow: hidden;
}

.bmx-btn__text {
	position: relative;
	display: block;
	color: inherit;
	/* Set explicitly (not inherited) because .bmx-btn zeroes its own
	   line-height to stop the anchor's font strut inflating button
	   height ~7px beyond its padding+font-size — see .bmx-btn above. */
	line-height: 1.6;
	transition: transform 0.3s ease;
}

.bmx-btn__text + .bmx-btn__text {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
}

.bmx-btn:hover .bmx-btn__text:first-child {
	transform: translateY( -150% );
}

.bmx-btn:hover .bmx-btn__text + .bmx-btn__text {
	top: 50%;
	transform: translateY( -50% );
}