// Button.
.elementor-widget-button {
	// Base Theme Widget Styles.
	&.vamtam-has-theme-widget-styles {
		&.vamtam-has-underline-anim {
			.elementor-button {
				@tran-time: .5s; // If changed, please update the timeout timer value in the JS handler as well.
				@width: var(--vamtam-underline-width, var(--vamtam-global-underline-width, 1px));
				@spacing: var(--vamtam-underline-spacing, var(--vamtam-global-underline-spacing, 1px));
				@color: linear-gradient(var(--vamtam-underline-bg-color, var(--vamtam-global-underline-bg-color, currentColor)) 0 0);

				.elementor-button-text {
					position: relative;

					@keyframes vamtam-underline-anim-left {
						0% {
							transform: scaleX(0);
						}

						100% {
							transform: scale(1);
						}
					}

					@keyframes vamtam-underline-anim-right {
						0% {
							transform: scaleX(.8);
						}

						100% {
							transform: scaleX(0);
						}
					}

					&::after,
					&::before {
						content: "";
						display: block;
						position: absolute;
						width: 100%;
						top: 100%;
						margin-top: @spacing;
						height: @width;
						background: @color;
						will-change: transform;
					}
					&::before {
						transform-origin: left;
					}
					&::after {
						transform: scaleX(0);
						transform-origin: right;
					}
				}

				@media (any-pointer: fine) {
					// This class is added from the JS hadler of the widget (handleBtnUnderlineAnimation() function).
					&.hovered {
						.elementor-button-text {
							&::before {
								animation: vamtam-underline-anim-left calc(@tran-time + 0.15s) ease forwards;
							}

							&::after {
								animation: vamtam-underline-anim-right @tran-time ease forwards;
							}
						}
					}
				}
			}
		}
	}
}
