/**
 * Icon Button
 * Pretty Well Fit Elements
 *
 * Structure lives here. Every value a user can change comes in as a custom
 * property written by an Elementor style control.
 */

.pwf-icon-button-wrap {
	display: block;
}

.pwf-icon-button {
	--pwf-btn-bg: #7b74b0;
	--pwf-btn-color: #ffffff;
	--pwf-btn-circle-bg: #ffffff;
	--pwf-btn-icon-color: #2a2446;

	--pwf-btn-bg-hover: #6c64a6;
	--pwf-btn-color-hover: #ffffff;
	--pwf-btn-circle-bg-hover: #ffffff;
	--pwf-btn-icon-color-hover: #2a2446;

	--pwf-btn-circle-size: 41px;
	--pwf-btn-icon-size: 17px;
	--pwf-btn-icon-gap: 27px;

	--pwf-btn-grow: 12px;
	--pwf-btn-scale: 1.03;
	--pwf-btn-icon-travel: 0px;
	--pwf-btn-duration: 250ms;
	--pwf-btn-easing: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Flipped to -1 when the icon sits on the left, so the icon travels away
	   from the text in both arrangements. */
	--pwf-btn-dir: 1;

	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--pwf-btn-icon-gap);
	box-sizing: border-box;
	padding: 7px 8px 7px 28px;
	border: 0 solid transparent;
	border-radius: 100px;
	background-color: var(--pwf-btn-bg);
	color: var(--pwf-btn-color);
	font-family: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
	transition:
		background-color var(--pwf-btn-duration) var(--pwf-btn-easing),
		border-color var(--pwf-btn-duration) var(--pwf-btn-easing),
		color var(--pwf-btn-duration) var(--pwf-btn-easing),
		gap var(--pwf-btn-duration) var(--pwf-btn-easing),
		min-width var(--pwf-btn-duration) var(--pwf-btn-easing),
		transform var(--pwf-btn-duration) var(--pwf-btn-easing);
}

/*
 * The text takes the leftover room, which pushes the circle to the far edge
 * and keeps the text against the opposite one. Min width then decides how wide
 * the button sits at rest.
 */
.pwf-icon-button__text {
	flex: 1 1 auto;
	color: inherit;
}

.pwf-icon-button--icon-left {
	flex-direction: row-reverse;
	padding: 7px 28px 7px 8px;
	--pwf-btn-dir: -1;
}

.pwf-icon-button--icon-none {
	justify-content: center;
	padding-right: 28px;
	text-align: center;
}

.pwf-icon-button--icon-none .pwf-icon-button__text {
	flex: 0 1 auto;
}

/* ---------------------------------------------------------------------------
 * Circle and icon
 * ------------------------------------------------------------------------ */

.pwf-icon-button__circle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pwf-btn-circle-size);
	height: var(--pwf-btn-circle-size);
	border: 0 solid transparent;
	border-radius: 50%;
	background-color: var(--pwf-btn-circle-bg);
	transition: background-color var(--pwf-btn-duration) var(--pwf-btn-easing);
}

.pwf-icon-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--pwf-btn-icon-color);
	line-height: 1;
	transition:
		transform var(--pwf-btn-duration) var(--pwf-btn-easing),
		color var(--pwf-btn-duration) var(--pwf-btn-easing);
}

.pwf-icon-button__icon svg {
	display: block;
	width: var(--pwf-btn-icon-size);
	height: var(--pwf-btn-icon-size);
	fill: currentColor;
}

.pwf-icon-button__icon i {
	font-size: var(--pwf-btn-icon-size);
	line-height: 1;
}

/* ---------------------------------------------------------------------------
 * Hover and focus
 *
 * Both states are styled together so keyboard users get the same treatment
 * mouse users do.
 * ------------------------------------------------------------------------ */

.pwf-icon-button:hover,
.pwf-icon-button:focus-visible {
	background-color: var(--pwf-btn-bg-hover);
	color: var(--pwf-btn-color-hover);
}

.pwf-icon-button:hover .pwf-icon-button__circle,
.pwf-icon-button:focus-visible .pwf-icon-button__circle {
	background-color: var(--pwf-btn-circle-bg-hover);
}

.pwf-icon-button:hover .pwf-icon-button__icon,
.pwf-icon-button:focus-visible .pwf-icon-button__icon {
	color: var(--pwf-btn-icon-color-hover);
	transform: translateX(calc(var(--pwf-btn-icon-travel) * var(--pwf-btn-dir)));
}

.pwf-icon-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/*
 * Wider only. The gap between the text and the circle opens up, so the button
 * gets wider while the height, the padding and the circle all stay put. The
 * text holds its position and the circle rides out with the edge, which is
 * what the reference design does. Nothing is scaled, so the text stays crisp.
 */
.pwf-icon-button--grow-width:hover,
.pwf-icon-button--grow-width:focus-visible {
	gap: calc(var(--pwf-btn-icon-gap) + var(--pwf-btn-grow));
}

/* No icon means no gap to open, so fall back to widening the button itself. */
.pwf-icon-button--grow-width.pwf-icon-button--icon-none:hover,
.pwf-icon-button--grow-width.pwf-icon-button--icon-none:focus-visible {
	min-width: calc(var(--pwf-btn-min-width, 0px) + var(--pwf-btn-grow));
}

/* Scale up. Grows everything, including the text. */
.pwf-icon-button--grow-scale:hover,
.pwf-icon-button--grow-scale:focus-visible {
	transform: scale(var(--pwf-btn-scale));
}

/* ---------------------------------------------------------------------------
 * Layout modifiers
 * ------------------------------------------------------------------------ */

.pwf-icon-button-full-yes .pwf-icon-button {
	display: flex;
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

	.pwf-icon-button,
	.pwf-icon-button__circle,
	.pwf-icon-button__icon {
		transition-duration: 1ms;
	}

	.pwf-icon-button--grow-scale:hover,
	.pwf-icon-button--grow-scale:focus-visible {
		transform: none;
	}

	.pwf-icon-button:hover .pwf-icon-button__icon,
	.pwf-icon-button:focus-visible .pwf-icon-button__icon {
		transform: none;
	}
}