// Button.
.elementor-widget-button {
	// Base Theme Widget Styles.
	&.vamtam-has-theme-widget-styles {
		&.vamtam-btn-text-align {
			.elementor-button-content-wrapper {
				text-align: start;

				.elementor-button-icon i {
					color: transparent;
				}

				&:hover {
					.elementor-button-icon i {
						color: inherit;
					}
				}
			}
		}

		&.elementor-align-justify .elementor-button-link {
			text-align: start;
		}

		&.vamtam-btn-icon {
			.elementor-button {
				.elementor-button-content-wrapper {
					text-align: start;
				}

				.elementor-button-icon {
					color: transparent;
				}

				&:hover .elementor-button-icon {
					color: inherit;
				}
			}
		}

		@media (pointer:fine) {
			&.vamtam-has-underline-anim {
				.elementor-button {
					.elementor-button-content-wrapper {
						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 {
							@width: var(--vamtam-underline-width, var(--vamtam-global-underline-width, 1px));
							@spacing: var(--vamtam-underline-spacing, var(--vamtam-global-underline-spacing, 2px));
							@color: var(--vamtam-underline-bg-color, var(--vamtam-global-underline-bg-color, currentColor));
							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;
						}
					}
					// This class is added from the JS hadler of the widget (handleBtnUnderlineAnimation() function).
					&.hovered {
						.elementor-button-content-wrapper {
							@anim-time: .5s; // If changed, please update the timeout timer value in the JS handler as well (handleBtnUnderlineAnimation() function).
							&::before {
								animation: vamtam-underline-anim-left calc(@anim-time + 0.15s) ease forwards;
							}

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

			&.vamtam-has-bg-hover-anim {
				.elementor-button {
					background-image: linear-gradient(to right, var(--vamtam-bg-color-hover, var(--vamtam-btn-hover-bg-color)) 50%, var(--vamtam-bg-color, var(--vamtam-btn-bg-color)) 50%);
					background-size: calc(200% + 1px) 100%;
					background-repeat: no-repeat;
					background-position: right bottom;
					transition: color .3s ease, background .5s cubic-bezier(.62,.83,.34,.93);

					&:hover, &:focus {
						background-color: var(--vamtam-bg-color, var(--vamtam-btn-bg-color)); // The bg transition is happening from the bg-image prop. This is to avoid bg-hover color leakage from the bottom on some resolutions where there are sub-pixel discrepancies.
						background-position: left bottom;
					}
				}
			}
		}
	}
}