/* WIDGET: BUTTON
-------------------------------------------- */

.vlt-btn {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: none;
	border-radius: 0;
	outline: 0;
	box-shadow: none;
	transition: all var(--vlt-transition-duration) var(--vlt-transition-easing);
	z-index: 1;

	&:disabled,
	&.disabled {
		pointer-events: none;
		cursor: not-allowed;
	}

	&--block {
		width: 100%;
	}

	&--rounded {
		border-radius: px2rem(100px);
	}

	&:focus {
		outline: none;
	}

	svg {
		height: 1em;
	}

	i.left,
	svg.left,
	&.vlt-btn--icon-left svg {
		margin-right: 1em;
	}

	i.right,
	svg.right,
	&.vlt-btn--icon-right svg {
		margin-left: 1em;
	}

	&:hover {
		text-decoration: none;
		transform: translateY(-2px);
	}

}

/* BUTTON PRIMARY
-------------------------------------------- */

.vlt-btn.vlt-btn--primary,
%vlt-btn--primary {
	color: var(--vlt-color-white);
	background-color: var(--vlt-accent-1);

	&:hover {
		color: var(--vlt-color-white);
		background-color: var(--vlt-accent-1-hover);
	}

}

/* BUTTON SECONDARY
-------------------------------------------- */

.vlt-btn.vlt-btn--secondary,
%vlt-btn--secondary {
	color: var(--vlt-color-white);
	background-color: var(--vlt-accent-2);

	&:hover {
		color: var(--vlt-color-white);
		background-color: var(--vlt-accent-2-hover);
	}

}

/* BUTTON TERTIARY
-------------------------------------------- */

.vlt-btn.vlt-btn--tertiary,
%vlt-btn--tertiary {
	color: var(--vlt-color-dark);
	background-color: var(--vlt-accent-3);

	&:hover {
		color: var(--vlt-color-dark);
		background-color: var(--vlt-accent-3-hover);
	}

}

/* BUTTON LIGHT
-------------------------------------------- */

.vlt-btn.vlt-btn--light {
	color: var(--vlt-color-dark);
	background-color: var(--vlt-color-gray-0p3);

	&:hover {
		color: var(--vlt-color-dark);
		background-color: var(--vlt-color-gray-light);
	}

}

/* BUTTON LINK
-------------------------------------------- */

.vlt-btn.vlt-btn--link {
	position: relative;
	font-weight: 700;
	color: var(--vlt-color-dark);
	text-decoration: none;

	&:hover,
	&:focus {
		transform: none;
	}

	&::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: currentColor;
		transition: transform var(--vlt-transition-duration) var(--vlt-transition-easing);
		transform: scale(1, 1);
		transform-origin: 0 50%;
		will-change: transform;
	}

	&.vlt-btn--primary,
	&.vlt-btn--primary:hover,
	&.vlt-btn--primary:focus,
	&.vlt-btn--primary.focus,
	&.vlt-btn--primary:not(:disabled):not(.disabled):active,
	&.vlt-btn--primary:not(:disabled):not(.disabled).active {
		color: var(--vlt-accent-1);
		background-color: transparent;
	}

	&:hover,
	&:focus {
		color: var(--vlt-color-dark);
		text-decoration: none;

		&::after {
			transform: scale(0,1);
			transform-origin: 100% 50%;
		}

	}

}

/* BUTTON SIZES
-------------------------------------------- */

.vlt-btn,
.vlt-btn.vlt-btn--md {
	padding: px2rem(15px) px2rem(40px);
}

.vlt-btn.vlt-btn--lg {
	padding: px2rem(20px) px2rem(50px);
}

.vlt-btn.vlt-btn--sm {
	padding: px2rem(10px) px2rem(20px);
	font-size: px2rem(14px);
}

.vlt-btn.vlt-btn--xs {
	padding: px2rem(8px) px2rem(16px);
	font-size: px2rem(13px);
}

/* BUTTON CLEAN
-------------------------------------------- */

.vlt-btn.vlt-btn--clean {
	padding: 0;
	background-color: transparent;
}