/* Pill button. On hover the label pill narrows and an arrow circle scales in on its right.
   The label's side padding shrinks by as much as the button's end padding grows,
   so the button keeps its width. Colours sit on the two pills, not the link. */
.mfb-button {
	--mfb-button-size: 3rem;
	--mfb-button-gap: 0.25rem;
	--mfb-button-pad: 3.25rem;
	--mfb-button-bg: var(--mfb-color-sun);
	--mfb-button-fg: var(--mfb-color-ink);
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--mfb-button-fg);
	font-size: var(--mfb-text-body);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: padding 0.5s var(--mfb-ease-out-quart);
}

.mfb-button__label,
.mfb-button__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--mfb-button-size);
	border-radius: var(--mfb-radius-pill);
	background: var(--mfb-button-bg);
	transition:
		padding 0.5s var(--mfb-ease-out-quart),
		scale 0.5s var(--mfb-ease-out-quart),
		background-color 0.3s ease;
}

.mfb-button__label {
	position: relative;
	z-index: 1;
	padding-inline: var(--mfb-button-pad);
	white-space: nowrap;
}

.mfb-button__arrow {
	position: absolute;
	right: 0;
	width: var(--mfb-button-size);
	overflow: hidden;
	scale: 0;
	transform-origin: left center;
}

.mfb-button__arrow span {
	translate: -100% 0;
	transition: translate 0.3s var(--mfb-ease-out-quart) 0.1s;
}

.mfb-button:focus-visible {
	outline: none;
}

.mfb-button:focus-visible .mfb-button__label {
	outline: 2px solid var(--mfb-color-ink);
	outline-offset: 3px;
}

@media (hover: hover) {
	.mfb-button:hover {
		padding-inline-end: calc(var(--mfb-button-size) + var(--mfb-button-gap));
	}

	.mfb-button:hover .mfb-button__label {
		padding-inline: calc(var(--mfb-button-pad) - (var(--mfb-button-size) + var(--mfb-button-gap)) / 2);
	}

	.mfb-button:hover .mfb-button__arrow {
		scale: 1;
	}

	.mfb-button:hover .mfb-button__arrow span {
		translate: 0 0;
	}
}

.mfb-button--small {
	--mfb-button-size: 2.5rem;
	--mfb-button-pad: 2.75rem;
	font-size: var(--mfb-text-small);
}

.mfb-button--primary {
	--mfb-button-bg: var(--mfb-color-sun);
	--mfb-button-fg: var(--mfb-color-ink);
}

.mfb-eyebrow {
	font-size: var(--mfb-text-h4);
	font-weight: 500;
}

.mfb-plain-list {
	padding: 0;
	list-style: none;
}

.mfb-arrow {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	background: transparent;
	/* Follows the section text, so the arrows stay visible on a dark section background. */
	color: var(--mfb-section-heading, var(--mfb-color-ink));
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		opacity 0.2s ease,
		transform 0.16s ease-out;
}

/* Round arrow button (Partners, Client stories). Chevron drawn with two borders, like the stack toggle icons. */
.mfb-arrow::before {
	content: "";
	width: 0.625rem;
	height: 0.625rem;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: translateX(-0.125rem) rotate(-45deg);
}

.mfb-arrow--prev::before {
	transform: translateX(0.125rem) rotate(135deg);
}

.mfb-arrow:active:not([aria-disabled="true"]) {
	transform: scale(0.94);
}

.mfb-arrow[aria-disabled="true"] {
	opacity: 0.3;
	cursor: default;
}

@media (hover: hover) {
	.mfb-arrow:not([aria-disabled="true"]):hover {
		background: var(--mfb-section-heading, var(--mfb-color-ink));
		color: var(--mfb-section-bg, var(--mfb-color-paper));
	}
}