/* =============================================================================
- Button
============================================================================= */
.elementor-widget {
	.gwel-btn-wrapper {
		display: flex;
		align-items: center;
	}
	.gwel-btn {
		display: inline-flex;
		outline: none;
		text-align: center;
		position: relative;
		z-index: 1;
		font-family: var(--grve-typography--button-f, inherit);
		font-weight: var(--grve-typography--button-w);
		font-style: var(--grve-typography--button-st, normal);
		text-transform: var(--grve-typography--button-tr);
		font-size: var(--grve-typography--button-s, 16px);
		line-height: 1.000em;
		letter-spacing: var(--grve-typography--button-ls);
		transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
		white-space: nowrap;
		min-width: min-content;
		&:focus{
			text-decoration: none;
		}
		&.gwel-btn-fluid {
			width: 100%;
		}
		.gwel-btn-inner {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			gap: 12px;
			&.gwel-icon-right {
				flex-direction: row;
			}
			&.gwel-icon-left {
				flex-direction: row-reverse;
			}
		}
		.gwel-icon {
			text-align: center;
			font-size: var(--gwel-btn-icon--size, 24px);
			top: var(--gwel-btn-icon--vertical-adjust, 0px);
			color: var(--gwel-btn-icon--text-c, currentColor);
			overflow: hidden;
			&.gwel-icon-view-stacked {
				padding: var(--gwel-btn-icon--padding, 0.5em);
				color: var(--gwel-btn-icon--text-c, #ffffff);
				background-color: var(--gwel-btn-icon--background-c, #b8b8b8);
				border-radius: var(--gwel-btn-icon--border-radius, 100%);
			}
			&.gwel-icon-view-framed {
				padding: var(--gwel-btn-icon--padding, 0.5em);
				color: var(--gwel-btn-icon--text-c, #b8b8b8);
				border: var(--gwel-btn-icon--border-w, 3px) solid var(--gwel-btn-icon--border-c, $color-grey);
				background-color: var(--gwel-btn-icon--background-c, transparent);
				border-radius: var(--gwel-btn-icon--border-radius, 100%);
			}
		}
		&.gwel-btn-underline {
			.gwel-btn-inner {
				position: relative;
				&:after {
					content: '';
					position: absolute;
					bottom: var(--gwel-btn--underline-offset, -5px);
					width: var(--gwel-btn--underline-w, 100%);
					height: var(--gwel-btn--underline-h, 1px);
					background-color: var(--gwel-btn--underline-c, currentColor);
					transition: background-color .3s ease, width .3s ease, height .3s ease;
				}
			}
			&.gwel-btn-underline-left {
				.gwel-btn-inner {
					&:after {
						left: 0;
					}
				}
			}
			&.gwel-btn-underline-right {
				.gwel-btn-inner {
					&:after {
						right: 0;
					}
				}
			}
			&.gwel-btn-underline-center {
				.gwel-btn-inner {
					&:after {
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
		&:hover {
			.gwel-icon {
				&.gwel-animation-diagonial {
					svg, i {
						animation: gwel_btn_icon_diagonial_animation .5s;
					}
				}
				&.gwel-animation-left-right {
					svg, i {
						animation: gwel_btn_icon_left_right_animation .5s;
					}
				}
				&.gwel-animation-right-left {
					svg, i {
						animation: gwel_btn_icon_right_left_animation .5s;
					}
				}
				&.gwel-animation-top-bottom {
					svg, i {
						animation: gwel_btn_icon_top_bottom_animation .5s;
					}
				}
				&.gwel-animation-bottom-top {
					svg, i {
						animation: gwel_btn_icon_bottom_top_animation .5s;
					}
				}
			}
		}
	}
	&.gwel-btn-solid {
		.gwel-btn {
			border-radius: 2px;
			padding-top: var(--grve-padding--button-tb, 20px);
			padding-bottom: var(--grve-padding--button-tb, 20px);
			padding-left: var(--grve-padding--button-lr, 30px);
			padding-right: var(--grve-padding--button-lr, 30px);
			color: var(--grve-button--text-c, #000000);
			background-color: var(--grve-button--background-c, #ebebeb);
			border-style: solid;
			border-color: transparent;
			&:hover {
				color: var(--grve-button--text-hover-c, #ffffff);
				background-color: var(--grve-button--background-hover-c, #000000);
			}
		}
	}
	&.gwel-btn-outline {
		.gwel-btn {
			border-radius: 2px;
			padding-top: var(--grve-padding--button-tb, 20px);
			padding-bottom: var(--grve-padding--button-tb, 20px);
			padding-left: var(--grve-padding--button-lr, 30px);
			padding-right: var(--grve-padding--button-lr, 30px);
			color: #000000;
			background-color: transparent;
			border-width: 2px;
			border-style: solid;
			border-color: #ebebeb;
			&:hover {
				color: #ffffff;
				background-color: #000000;
				border-color: #000000;
			}
		}
	}
	&.gwel-btn-textual {
		.gwel-btn {
			color: #000000;
			&:hover {
				color: #cccccc;
			}
		}
	}
}


@keyframes gwel_btn_icon_diagonial_animation {
	0%,
	100% {
		transform: translate(0,0);
	}
	50% {
		transform: translate(100%,-100%);
	}
	51% {
		transform: translate(-100%,100%);
	}
}

@keyframes gwel_btn_icon_left_right_animation {
	0%,
	100% {
		transform: translate(0,0);
	}
	50% {
		transform: translate(100%,0);
	}
	51% {
		transform: translate(-100%,0);
	}
}

@keyframes gwel_btn_icon_right_left_animation {
	0%,
	100% {
		transform: translate(0,0);
	}
	50% {
		transform: translate(-100%,0);
	}
	51% {
		transform: translate(100%,0);
	}
}

@keyframes gwel_btn_icon_top_bottom_animation {
	0%,
	100% {
		transform: translate(0,0);
	}
	50% {
		transform: translate(0,100%);
	}
	51% {
		transform: translate(0,-100%);
	}
}

@keyframes gwel_btn_icon_bottom_top_animation {
	0%,
	100% {
		transform: translate(0,0);
	}
	50% {
		transform: translate(0,-100%);
	}
	51% {
		transform: translate(0,100%);
	}
}