/*
 * Creative Button widget.
 *
 * Every effect is CSS only. A button is the element most likely to be pressed
 * before the page has finished loading its scripts, and an effect that needs
 * JavaScript is simply absent for that press.
 */

.vora-btn-wrap {
	display: flex;
	flex-direction: column;
}

.vora-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	overflow: hidden;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border-radius: 6px;
	isolation: isolate;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.vora-btn--sm { padding: 9px 18px; font-size: 13px; }
.vora-btn--md { padding: 13px 26px; font-size: 15px; }
.vora-btn--lg { padding: 17px 36px; font-size: 17px; }

.vora-btn__text,
.vora-btn__icon {
	position: relative;
	z-index: 1;
}

.vora-btn__icon {
	display: inline-flex;
	line-height: 1;
}

.vora-btn__icon i,
.vora-btn__icon svg {
	width: 1em;
	height: 1em;
	font-size: inherit;
}

/* An uploaded SVG renders inline and paints black by default, so it would ignore
   both the button's text colour and the icon colour control — which set
   `color`, as they must for a font icon. This is what ties the two together. */
.vora-btn__icon svg {
	fill: currentColor;
}

/* Effects ------------------------------------------------------------- */

.vora-btn--lift:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18); }

.vora-btn--grow:hover { transform: scale(1.04); }

/* The sweep and slide effects paint a pseudo-element behind the label, which
   is why the hover background colour is applied to `::after` as well. */
.vora-btn--sweep::after,
.vora-btn--slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	transition: transform 0.32s ease;
}

.vora-btn--sweep::after { transform: translateX(-100%); }
.vora-btn--sweep:hover::after { transform: translateX(0); }

.vora-btn--slide::after { transform: translateY(100%); }
.vora-btn--slide:hover::after { transform: translateY(0); }

.vora-btn--shine::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	z-index: 0;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	transform: skewX(-18deg);
	transition: left 0.55s ease;
}

.vora-btn--shine:hover::after { left: 120%; }

@media (prefers-reduced-motion: reduce) {
	.vora-btn,
	.vora-btn::after { transition: none; }
	.vora-btn--lift:hover,
	.vora-btn--grow:hover { transform: none; }
}