/*
 * Buttons
 */

.w-btn,
.button,
button[type=submit],
input[type=submit] {
	display: inline-block;
	vertical-align: top;
	text-align: center;
	line-height: 1.2; /* fallback value */
	position: relative;
	transition-property: background, border, box-shadow, color, opacity, transform;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
.w-btn,
.button {
	padding: .8em 1.8em; /* fallback value */
	}
input[type=submit] {
	border-style: solid;
	border-width: var(--btn-border-width, 0px);
	}
	.w-btn i {
		display: inline-block;
		vertical-align: top;
		line-height: inherit;
		}
	.w-btn.icon_atleft i {
		margin-right: .5em;
		}
	.w-btn.icon_atright i {
		margin-left: .5em;
		}
	.w-btn.text_none i {
		margin: 0 !important;
		width: 1.2em;
		}
	.w-btn-label {
		display: inline-block;
		vertical-align: top;
		}
	/* element to imitate the border */
	.w-btn:before,
	.button:before,
	button[type=submit]:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: inherit;
		border-width: var(--btn-border-width, 0px);
		border-style: solid;
		border-color: inherit;
		border-image: inherit;
		transition: inherit;
		}

/* Border gradient animation */
.w-btn.with_border_animation {
	contain: paint;
	padding: 0 !important;
	background: none !important;
	}
	.w-btn.with_border_animation::after {
		display: none !important;
		}
	.w-btn.with_border_animation::before {
		top: 50%;
		aspect-ratio: 1;
		scale: 1.2;
		translate: 0 -50%;
		transition: none;
		border: none;
		animation: btnGradientRotate var(--border-animation-duration, 3s) linear infinite;
		}
	.w-btn.with_border_animation.play_on_hover:not(:hover)::before,
	.w-btn.with_border_animation.pause_on_hover:hover::before {
		animation-play-state: paused;
		}
	.w-btn-inner {
		display: inline-block;
		vertical-align: top;
		position: relative;
		z-index: 1;
		padding: .8em 1.8em; /* fallback value */
		margin: var(--btn-border-width, 0px);
		width: calc( 100% - 2 * var(--btn-border-width, 0px) );
		border-radius: inherit;
		background: var(--btn-background, var(--color-content-bg));
		transition-duration: inherit;
		transition-timing-function: inherit;
		}
	.no-touch .w-btn:hover .w-btn-inner {
		background: var(--btn-hover-background, var(--color-content-bg));
		}

.links_underline a.w-btn,
.links_underline a.button {
	text-decoration: none !important;
	}

/* Button Wrapper */
.w-btn-wrapper {
	margin: .3rem 0;
	}
.w-btn-wrapper[class*="align_none"] {
	display: inline-block;
	vertical-align: top;
	}
*:not(.w-hwrapper) > .w-btn-wrapper[class*="align_none"] {
	margin-inline-end: .6rem;
	}
.w-btn-wrapper.align_justify > .w-btn {
	width: 100%;
	}

/* Badge style by default */
.us-btn-style_badge {
	padding: .7em 1.2em;
	border-radius: 9em;
	background: var(--color-content-primary-grad);
	color: #fff !important;
	}
.no-touch .us-btn-style_badge:hover {
	background: var(--color-content-secondary-grad);
	}
	.us-btn-style_badge:before {
		display: none;
		}
		
/* Text Hover Animations */
@keyframes btnTextStart_slideTop {
	100% {
		transform: translate3d(0,105%,0);
		opacity: 0;
	}
}
@keyframes btnTextEnd_slideTop {
	0% {
		transform: translate3d(0,-100%,0);
		opacity: 0;
	}
	100% {
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

@keyframes btnTextStart_slideBottom {
	100% {
		transform: translate3d(0,-105%,0);
		opacity: 0;
	}
}
@keyframes btnTextEnd_slideBottom {
	0% {
		transform: translate3d(0,100%,0);
		opacity: 0;
	}
	100% {
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

@keyframes btnTextStart_slideLeft {
	100% {
		transform: translate3d(50%,0,0);
		opacity: 0;
	}
}
@keyframes btnTextEnd_slideLeft {
	0% {
		transform: translate3d(-50%,0,0);
		opacity: 0;
	}
	100% {
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

@keyframes btnTextStart_slideRight {
	100% {
		transform: translate3d(-50%,0,0);
		opacity: 0;
	}
}
@keyframes btnTextEnd_slideRight {
	0% {
		transform: translate3d(50%,0,0);
		opacity: 0;
	}
	100% {
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

@keyframes btnTextStart_scaleUp {
	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}
@keyframes btnTextEnd_scaleUp {
	0% {
		transform: scale(.2);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes btnTextStart_scaleDown {
	100% {
		transform: scale(0.2);
		opacity: 0;
	}
}
@keyframes btnTextEnd_scaleDown {
	0% {
		transform: scale(1.5);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes btnGradientRotate {
	0% {
		transform: translateZ(0) rotate(0);
	}
	100% {
		transform: translateZ(0) rotate(360deg);
	}
}
