.wp-block-buttons {
	&.fixed-width {
		flex-shrink: 0;
	}
}

.wp-block-button,
button.forminator-button {
	overflow: hidden;
	position: relative;
	border: none;
	font-weight: bold;
	cursor: pointer;
/*	border-radius: 10px;*/
	
	--colour-bg: var(--wp--preset--color--accent);
	--colour-text: var(--wp--preset--color--base);
	--colour-border: var(--wp--preset--color--accent);

	--colour-bg-hover: var(--wp--preset--color--accent-2);
	--colour-text-hover: var(--wp--preset--color--base);
	--colour-border-hover: var(--wp--preset--color--accent-2);

	background-color: var(--colour-bg);
	border-color: var(--colour-border);

	/* Background Hover Shape */
	&::before {
		content: '';
		position: absolute;
		bottom: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: var(--colour-bg-hover);
		z-index: 1;
		transition: all .3s;
		opacity: 0;
	}

	.wp-block-button__link {
		padding: 16px 20px;
		font-weight: bold;
		color: var(--colour-text);

		/* Icon */
		&::after {
			background-color: var(--colour-text);	
		}
	}

	&.button-colour--light {
		--colour-bg: var(--wp--preset--color--base);
		--colour-text: var(--wp--preset--color--accent);
		--colour-border: var(--wp--preset--color--base);

		--colour-bg-hover: var(--wp--preset--color--light-grey);
		--colour-text-hover: var(--wp--preset--color--accent);
		--colour-border-hover: var(--wp--preset--color--light-grey);
	}

	&.button-colour--dark {
		--colour-bg: var(--wp--preset--color--contrast);
		--colour-text: var(--wp--preset--color--base);
		--colour-border: var(--wp--preset--color--contrast);

		--colour-bg-hover: var(--wp--preset--color--accent);
		--colour-text-hover: var(--wp--preset--color--base);
		--colour-border-hover: var(--wp--preset--color--accent);
	}

	&:hover,
	&:focus {
		border-color: var(--colour-border-hover);
		.wp-block-button__link {
			color: var(--colour-text-hover);
			&::after {
				background-color: var(--colour-text-hover);
			}
		}

		&::before {
			opacity: 1;
		}
	}

	&.button-style--outline {
		background-color: transparent;
		border: 1px solid var(--colour-border);
		.wp-block-button__link {
			color: var(--colour-bg);
			
			&::after {
				background-color: var(--colour-bg);
			}
		}
		
		&::before {
			background-color: var(--colour-bg);
		}

		&:hover,
		&:focus {
			.wp-block-button__link {
				color: var(--colour-text);
				&::after {
					background-color: var(--colour-text);
				}
			}
		}
	}

	&.button-style--empty {
		background-color: transparent;
		border: none;
		padding: 0;

		.wp-block-button__link {
			color: var(--colour-bg);
		
			&::after {
				background-color: var(--colour-bg);
			}
		}

		&::before {
			content: none;
		}

		&:hover,
		&:focus {
			.wp-block-button__link {
				color: var(--colour-bg-hover);
				&::after {
					background-color: var(--colour-bg-hover);
				}
			}
		}
	}

	&.md-full-width,
	&.md-full-width .wp-block-button__link {
		@media (max-width: 1199px) {
			width: 100%;
		}
	}

	&.sm-full-width,
	&.sm-full-width .wp-block-button__link {
		@media (max-width: 767px) {
			width: 100%;
		}
	}
}

.wp-block-button__link {
	border: none;
	background-color: transparent;
	position: relative;
	z-index: 2;
	transition: all .3s;
}

/*button.forminator-button,*/
.button-icon--paper-plane .wp-block-button__link,
.button-icon--phone .wp-block-button__link,
.button-icon--location-pin .wp-block-button__link,
.button-icon--arrow-right .wp-block-button__link {
	&::after {
		content: '';
		display: inline-block;
		width: 16px;
		height: 16px;
        margin-bottom: -3px;
		margin-left: 6px;
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		mask-size: contain;
		mask-repeat: no-repeat;
		transition: all .3s;
	}
}

.button-icon--paper-plane .wp-block-button__link::after {
	mask-image: url('../../../assets/icons/paper-plane.svg');
}

.button-icon--phone .wp-block-button__link::after {
	mask-image: url('../../../assets/icons/phone.svg');
}

.button-icon--location-pin .wp-block-button__link::after {
	mask-image: url('../../../assets/icons/location-pin.svg');
}

/*button.forminator-button::after,*/
.button-icon--arrow-right .wp-block-button__link::after {
	mask-image: url('../../../assets/icons/arrow-right.svg');
}

.forminator-row-last .forminator-field {
	display: inline-block;
	background-color: var(--wp--preset--color--accent);
}

button.forminator-button {
	color: var(--wp--preset--color--base);
	padding: 16px 20px;

	&::before {
		background-color: var(--wp--preset--color--accent-2);
		z-index: -1;
	}

	&::after {
		background-color: var(--wp--preset--color--base);
	}

	&:hover {
		color: var(--wp--preset--color--base);
		&::before {
			background-color: var(--wp--preset--color--accent-2);
		}

		&::after {
			background-color: var(--wp--preset--color--base);
		}
	}
}