/* Text Swap Button */
/**
* USAGE: 
* Add class "btn-text-swap" to a button or link element
* add an inner div:
********** <div class="btn-text-swap-text__wrap">
* inside the div add a span, like this, which contains the button text: 
********** <span class="btn-text-swap-text">Button Text</span>

***** FULL MARKUP: *****
<a href="#" class="btn-text-swap">
    <div class="btn-text-swap-text__wrap">
        <span class="btn-text-swap-text">Button Text</span>
    </div>
</a>
*************************
*/

:root {
	--ease-elastic: linear(
		0,
		0.55 7.5%,
		0.85 12%,
		0.95 14%,
		1.03 16.5%,
		1.09 20%,
		1.13 22%,
		1.14 23%,
		1.15 24.5%,
		1.15 26%,
		1.13 28%,
		1.11 31%,
		1.05 39%,
		1.02 43%,
		0.99 47%,
		0.98 52%,
		0.97 59%,
		1.002 81%,
		1
	);
}

.btn-text-swap {
    position: relative; 
	overflow: hidden; 
}

.btn-text-swap-text {
	z-index: 1;
	display: block;
	position: relative;
}

.btn-text-swap-text__wrap {
	padding-top: .25em;
	padding-bottom: .25em;
	overflow: hidden;
}

/* Only apply hover animations if they are actually not supported */
@media (hover: hover) and (pointer: fine) {
	.btn-text-swap,
	.btn-text-swap-text,
	.btn-text-swap-text__wrap {
		transition: transform 0.85s var(--ease-elastic);
	}

	/* Fake a duplicate text element using text shadow without blur  */
	/* We save the distance in a variable for easy use in the CSS animation */
	.btn-text-swap-text {
		--text-duplicate-distance: 3em;
		text-shadow: 0px var(--text-duplicate-distance) currentColor;
	}

	.btn-text-swap:hover .btn-text-swap-text {
		transform: translate(0px, calc(-1 * var(--text-duplicate-distance)));
	}
}


.wp-block-file__button,
.wp-block-button__link,
.btn-primary {
	width: fit-content;
    display: block;
    background-color: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-heading);
    font-style: italic;
    font-size: calc(var(--body-text-size) * 1.2);
    text-transform: uppercase;
    padding: 0.2rem 0.8rem;
    text-decoration: none;
	border-width: 0; 
	border-radius: 0;
}

.wp-block-button__link {
	padding: 0.4rem 1.6rem;
}


.wp-block-file__button {
	display: inline-block; 
}

.btn-primary .btn-text-swap-text__wrap {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}
.btn-primary:has(.btn-text-swap-text) {
	padding-top: 0;
	padding-bottom: 0;
}


.wp-block-file__button:hover, 
.wp-block-file__button:focus, 
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.btn-primary:hover,
.btn-primary:focus {
	background-color: oklch(from var(--accent) calc(l * 0.9) c h);
	text-decoration: none;
}




/* LINK BTN */

.btn__link {
	padding: .1rem 0; 
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	text-decoration: none;
	position: relative;
	background: transparent;
	border: 0; 
}
.btn__link:hover, .btn__link:focus {
	text-decoration: none;
}

.btn__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transition: transform var(--duration-normal) var(--cubic-default);
    transform: scale(0, 1);
    transform-origin: right center;
}

.btn__link:hover::after, .btn__link:focus::after {
	transform: scale(1, 1);
	transform-origin: left center;
}


.btn__link-bubble {
	color: currentColor;
    border-radius: 100em;
    justify-content: center;
    align-items: center;
    width: 1.5em;
    height: 1.5em;
    padding: 0.25em;
    transition: transform 0.2s cubic-bezier(0.625, 0.05, 0, 1);
    display: flex;
}



:where(.wp-block-file__button):is(a):active, :where(.wp-block-file__button):is(a):focus, :where(.wp-block-file__button):is(a):hover, :where(.wp-block-file__button):is(a):visited {
    box-shadow: none;
    color: currentColor;
    opacity: .85;
    text-decoration: none;
}


.ma-content-consent__button.wp-block-button__link  {
	text-rendering: geometricPrecision;
}