/* Hover effects for Button widgets (includes/modules/button-effects.php), matching Qi Addons'
   Button: "reveal" fills and the textual layout's underline. Classes are on the widget. */

/* Text link: just the text and icon. */
.elementor-widget-button.ndet-be-style-link .elementor-button {
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* A fill that slides across, behind the text and icon. */
.ndet-be-fill-left .elementor-button,
.ndet-be-fill-right .elementor-button,
.ndet-be-fill-up .elementor-button,
.ndet-be-fill-down .elementor-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.ndet-be-fill-left .elementor-button::before,
.ndet-be-fill-right .elementor-button::before,
.ndet-be-fill-up .elementor-button::before,
.ndet-be-fill-down .elementor-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--ndet-be-fill, rgba(0, 0, 0, 0.12));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ndet-be-speed, 300ms) cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

.ndet-be-fill-right .elementor-button::before {
	transform-origin: right;
}

.ndet-be-fill-up .elementor-button::before {
	transform: scaleY(0);
	transform-origin: bottom;
}

.ndet-be-fill-down .elementor-button::before {
	transform: scaleY(0);
	transform-origin: top;
}

.ndet-be-fill-left .elementor-button:hover::before,
.ndet-be-fill-right .elementor-button:hover::before,
.ndet-be-fill-up .elementor-button:hover::before,
.ndet-be-fill-down .elementor-button:hover::before,
.ndet-be-fill-left .elementor-button:focus-visible::before,
.ndet-be-fill-right .elementor-button:focus-visible::before,
.ndet-be-fill-up .elementor-button:focus-visible::before,
.ndet-be-fill-down .elementor-button:focus-visible::before {
	transform: none;
}

/* Elementor's own hover background, if set, switches in only once the fill has covered the
   button, and back at once on the way out, so the slide always shows. */
.ndet-be-fill-left .elementor-button,
.ndet-be-fill-right .elementor-button,
.ndet-be-fill-up .elementor-button,
.ndet-be-fill-down .elementor-button {
	transition: color var(--ndet-be-speed, 300ms), border-color var(--ndet-be-speed, 300ms), box-shadow var(--ndet-be-speed, 300ms), background-color 0s;
}

.ndet-be-fill-left .elementor-button:hover,
.ndet-be-fill-right .elementor-button:hover,
.ndet-be-fill-up .elementor-button:hover,
.ndet-be-fill-down .elementor-button:hover,
.ndet-be-fill-left .elementor-button:focus-visible,
.ndet-be-fill-right .elementor-button:focus-visible,
.ndet-be-fill-up .elementor-button:focus-visible,
.ndet-be-fill-down .elementor-button:focus-visible {
	transition: color var(--ndet-be-speed, 300ms), border-color var(--ndet-be-speed, 300ms), box-shadow var(--ndet-be-speed, 300ms), background-color 0s var(--ndet-be-speed, 300ms);
}

.ndet-be-fill-left .elementor-button-icon svg,
.ndet-be-fill-right .elementor-button-icon svg,
.ndet-be-fill-up .elementor-button-icon svg,
.ndet-be-fill-down .elementor-button-icon svg {
	transition: fill var(--ndet-be-speed, 300ms);
}

/* An underline under the text. */
.ndet-be-line-always .elementor-button-text,
.ndet-be-line-hide .elementor-button-text,
.ndet-be-line-draw .elementor-button-text {
	position: relative;
}

.ndet-be-line-always .elementor-button-text::after,
.ndet-be-line-hide .elementor-button-text::after,
.ndet-be-line-draw .elementor-button-text::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: var(--ndet-be-line, 2px);
	background-color: var(--ndet-be-line-c, currentColor);
	transition: background-color 0.25s ease-in-out, width 0.36s cubic-bezier(0.51, 0.5, 0.07, 0.99);
	pointer-events: none;
}

.ndet-be-from-right .elementor-button-text::after {
	left: auto;
	right: 0;
}

.ndet-be-line-always .elementor-button:hover .elementor-button-text::after,
.ndet-be-line-hide .elementor-button:hover .elementor-button-text::after,
.ndet-be-line-draw .elementor-button:hover .elementor-button-text::after,
.ndet-be-line-always .elementor-button:focus-visible .elementor-button-text::after,
.ndet-be-line-hide .elementor-button:focus-visible .elementor-button-text::after,
.ndet-be-line-draw .elementor-button:focus-visible .elementor-button-text::after {
	background-color: var(--ndet-be-line-h, var(--ndet-be-line-c, currentColor));
}

.ndet-be-line-hide .elementor-button:hover .elementor-button-text::after,
.ndet-be-line-hide .elementor-button:focus-visible .elementor-button-text::after {
	width: 0;
}

.ndet-be-line-draw .elementor-button-text::after {
	width: 0;
}

.ndet-be-line-draw .elementor-button:hover .elementor-button-text::after,
.ndet-be-line-draw .elementor-button:focus-visible .elementor-button-text::after {
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.ndet-be-fill-left .elementor-button::before,
	.ndet-be-fill-right .elementor-button::before,
	.ndet-be-fill-up .elementor-button::before,
	.ndet-be-fill-down .elementor-button::before,
	.ndet-be-line-hide .elementor-button-text::after,
	.ndet-be-line-draw .elementor-button-text::after {
		transition: none;
	}
}