@mixin lsx-button-scaffolding {
	&,
	&:active,
	&:visited {
		border: 0 none;
		border-radius: 3px;
		display: inline-block;
		font-size: 14px;
		font-weight: 700;
		height: 48px;
		left: 0;
		letter-spacing: 0.6px;
		line-height: 1.25;
		padding: 15px;
		position: relative;
		text-transform: uppercase;
		top: 0;
		transition: all 100ms ease;
	}

	& > .fa {
		margin-left: 10px;
	}
}
.button-holder {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
	vertical-align: middle;
	margin: 0;
	padding: 0;
}

@mixin lsx-bordered-button(
	$color: map-get($buttons, bg),
	$color-hover: map-get($buttons, color),
	$bg: transparent,
	$bg-hover: map-get($buttons, bg)
) {
	@include lsx-button-colour($color, $color-hover, $bg, $bg-hover);

	&,
	&:active,
	&:visited {
		border: 2px solid $color;
		box-shadow: none;
		height: 50px;
	}

	&:active {
		left: 0;
		top: 0;
	}

	transition: all 300ms ease;
}

@mixin custom-buttons-colours(
	$color: map-get($buttons, color),
	$color-hover: map-get($buttons, color-hover),
	$bg: map-get($buttons, bg),
	$bg-hover: map-get($buttons, bg-hover),
	$shadow: map-get($buttons, shadow)
) {
	.btn {
		@include lsx-button-colour(
			$color,
			$color-hover,
			$bg,
			$bg-hover,
			$shadow
		);
	}

	a.wp-block-button__link {
		@include lsx-button-colour(
			$color,
			$color-hover,
			$bg,
			$bg-hover,
			$shadow
		);
	}
	.button-3d-true {
		a.wp-block-button__link {
			@include lsx-button-colour(
				$color,
				$color-hover,
				$bg,
				$bg-hover,
				$shadow
			);
		}
		.wp-block-buttons & {
			&.wp-block.block-editor-block-list__block {
				@include lsx-button-colour(
					$color,
					$color-hover,
					$bg,
					$bg-hover,
					$shadow
				);
			}
		}
	}

	#respond {
		& > .comment-form {
			input[type="submit"] {
				@include lsx-button-colour(
					$color,
					$color-hover,
					$bg,
					$bg-hover,
					$shadow
				);
			}
		}
	}

	.border-btn {
		@include lsx-bordered-button($bg, #fff, transparent, $bg);
	}

	.white-border-btn {
		@include lsx-bordered-button(#fff, $bg, transparent, #fff);
	}

	#top-menu {
		.top-menu {
			& > .menu {
				& > .menu-item {
					&.cta {
						& > a {
							@include lsx-button-colour(
								$color,
								$color-hover,
								$bg,
								$bg-hover,
								$shadow
							);
						}
					}

					&.cta-red {
						& > a {
							@include lsx-button-colour(
								#ffffff,
								#ffffff,
								#d93a3a,
								#9f2020,
								#9f2020
							);
						}
					}
				}
			}
		}
	}

	#footer-cta {
		input[type="submit"] {
			@include lsx-button-colour(
				$color,
				$color-hover,
				$bg,
				$bg-hover,
				$shadow
			);
		}
	}

	// WooCommerce

	#wc_am_lost_api_key_form {
		input[type="submit"] {
			@include lsx-button-colour(
				$color,
				$color-hover,
				$bg,
				$bg-hover,
				$shadow
			);
		}
	}

	.lsx-wc-cart-menu-item {
		.widget_shopping_cart {
			.buttons {
				.button {
					@include lsx-button-colour(
						$color,
						$color-hover,
						$bg,
						$bg-hover,
						$shadow
					);
				}
			}
		}
	}

	.woocommerce-page #main {
		#respond input#submit,
		a.button:not(.quick-view-button),
		button.button,
		input.button {
			@include lsx-button-colour(
				$color,
				$color-hover,
				$bg,
				$bg-hover,
				$shadow
			);
			min-height: 40px;
			height: 100% !important;
		}
		.woocommerce {
			.woocommerce-cart-form {
				.shop_table {
					.button {
						&[name="update_cart"] {
							background-color: nth($green, 1);
							box-shadow: 2px 2px 0 0 nth($green, 2);
							&:hover {
								background-color: nth($green, 2);
							}
						}
					}
				}
			}
			.cart_totals {
				.wc-proceed-to-checkout {
					.checkout-button {
						background-color: nth($orange, 1);
						box-shadow: 2px 2px 0 0 nth($orange, 2);
						&:hover {
							background-color: nth($orange, 2);
						}
					}
				}
			}
		}
	}

	// Sensei

	.course-container,
	.course,
	.lesson,
	.quiz {
		a.button,
		a.comment-reply-link,
		#commentform #submit,
		.submit,
		input[type="submit"],
		input.button,
		button.button {
			&:not(.btn) {
				@include lsx-button-colour(
					$color,
					$color-hover,
					$bg,
					$bg-hover,
					$shadow
				);
			}
		}
	}

	.quiz {
		input[type="submit"] {
			&.complete:not(.btn) {
				@include lsx-button-colour(
					$color,
					$color-hover,
					#63a95f,
					#4e8b4a,
					#457a42
				);
			}

			&.reset:not(.btn) {
				@include lsx-button-colour(
					$color,
					$color-hover,
					#ed6c6e,
					#e73f41,
					#e5282b
				);
			}
		}
	}
}

@mixin custom-buttons-colours-admin(
	$color: map-get($buttons, color),
	$bg: map-get($buttons, bg)
) {
	.wp-block-button:not(.is-style-outline) {
		div.wp-block-button__link {
			background-color: $bg;
		}
	}
}

@mixin custom-cta-buttons-colours(
	$color: map-get($cta-buttons, color),
	$color-hover: map-get($cta-buttons, color-hover),
	$bg: map-get($cta-buttons, bg),
	$bg-hover: map-get($cta-buttons, bg-hover),
	$shadow: map-get($cta-buttons, shadow)
) {
	.cta-btn {
		@include lsx-button-colour(
			$color,
			$color-hover,
			$bg,
			$bg-hover,
			$shadow
		);
	}

	.cta-border-btn {
		@include lsx-bordered-button($bg, #fff, transparent, $bg);
	}

	// Caldera Form

	.caldera-forms-modal {
		@include lsx-button-colour(
			$color,
			$color-hover,
			$bg,
			$bg-hover,
			$shadow
		);
	}

	// WooCommerce

	.lsx-wc-cart-menu-item {
		.widget_shopping_cart {
			.buttons {
				.button.checkout {
					@include lsx-button-colour(
						$color,
						$color-hover,
						$bg,
						$bg-hover,
						$shadow
					);
				}
			}
		}
	}
}

@mixin custom-secondary-buttons-colours(
	$color: map-get($secondary-buttons, color),
	$color-hover: map-get($secondary-buttons, color-hover),
	$bg: map-get($secondary-buttons, bg),
	$bg-hover: map-get($secondary-buttons, bg-hover),
	$shadow: map-get($secondary-buttons, shadow)
) {
	.secondary-btn {
		@include lsx-button-colour(
			$color,
			$color-hover,
			$bg,
			$bg-hover,
			$shadow
		);
	}

	.secondary-border-btn {
		@include lsx-bordered-button($bg, #fff, transparent, $bg);
	}
}

@mixin custom-tertiary-buttons-colours(
	$color: map-get($tertiary-buttons, color),
	$color-hover: map-get($tertiary-buttons, color-hover),
	$bg: map-get($tertiary-buttons, bg),
	$bg-hover: map-get($tertiary-buttons, bg-hover),
	$shadow: map-get($tertiary-buttons, shadow)
) {
	.tertiary-btn {
		@include lsx-button-colour(
			$color,
			$color-hover,
			$bg,
			$bg-hover,
			$shadow
		);
	}

	.tertiary-border-btn {
		@include lsx-bordered-button($bg, #fff, transparent, $bg);
	}
}