.button {
	// loading state
	&.loading {
		position: relative;

		&:after {
			position: var(--loadingIndicatorPosition, absolute);
			font-family: 'woo';
			content: "\e982";
			color: var(--fontColor);
			opacity: 0.5;
			width: 15px;
			height: 15px;
			font-size: 15px;
			line-height: 15px;
			animation: spin 1.5s linear infinite;
			// animation-play-state: paused;
		}
	}
}


// form cart buttons
form.cart {

	.button {
		--height: 40px;
		--padding: 0 18px;

		@include media-breakpoint-down (sm) {
			flex-grow: 1;
		}

		&:after {
			--fontColor: #fff;
			--loadingIndicatorPosition: relative;
			margin-left: 10px;
			opacity: 1;
		}
	}

	// entry summary added to cart
	.added_to_cart {
		--height: 40px;
		--padding: 0 18px;
		--buttonFontWeight: 500;
		--buttonInitialColor: #f4f5f8;
		--buttonTextInitialColor: var(--fontColor);
		--buttonTextHoverColor: #fff;

		text-transform: capitalize;
		border: 1px solid $border-color;

		&:hover {
			border-color: var(--buttonHoverColor);
		}

		@include media-breakpoint-down (xs) {
			margin-top: 30px;
			min-width: 200px
		}

		@include media-breakpoint-only (sm) {
			margin-left: 15px;
		}

		@include media-breakpoint-down (sm) {
			flex-grow: 1;
		}

		@include media-breakpoint-up (md) {
			margin-left: 20px;
		}
	}
}


// spin animation
@keyframes spin {
	0% { transform:rotate(0deg) }
	100% { transform:rotate(360deg) }
}