.wp-block-button,
.forminator-button {
	position: relative;
	--colour1: var(--wp--preset--color--contrast);
	--colour2: var(--wp--preset--color--base);
	--colour3: var(--wp--preset--color--dark-grey);
	border: none;

	&.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%;
		}
	}

	&.button-colour--light {
		--colour1: var(--wp--preset--color--base);
		--colour2: var(--wp--preset--color--contrast);
		--colour3: var(--wp--preset--color--mid-grey);
	}

	&.button-colour--dark {
		--colour1: var(--wp--preset--color--contrast);
		--colour2: var(--wp--preset--color--base);
		--colour3: var(--wp--preset--color--dark-grey);
	}

	&.button-colour--colour {
		--colour1: var(--wp--preset--color--accent);
		--colour2: var(--wp--preset--color--base);
		--colour3: var(--wp--preset--color--accent-2);
	}

	background-color: var(--colour1);
	border-color: var(--colour1);

	&::before {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 0%;
		content: '';
		background-color: var(--colour3);
		z-index: 1;
		transition: all .3s;
	}

	.wp-block-button__link {
		color: var(--colour2);
	}

	&:hover,
	&:focus {
		border-color: var(--colour3);
		.wp-block-button__link {
			color: var(--colour2);
		}

		&::before {
			height: 100%;
		}
	}

	&.button-style--outline {
		background-color: transparent;
		border: 1px solid var(--colour1);
		color: var(--colour1);
		&:hover,
		&:focus {
			background-color: var(--colour1);
			color: var(--colour2);
		}
	}

	&.button-style--empty {
		background-color: transparent;
		border: none;
		color: var(--colour1);
		padding: 0;
		&:hover,
		&:focus {
			color: var(--colour2);
		}
	}
}

.forminator-button {
		color: var(--wp--preset--color--base);
	&::after {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		content: '';
		background-color: var(--wp--preset--color--accent);
		z-index: -2;
		transition: all .3s;
	}

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

	&:hover {
	}
}

.button-icon--paper-plane,
.button-icon--phone,
.button-icon--location-pin {
	.wp-block-button__link::after {
		content: '';
		display: inline-block;
		width: 16px;
		height: 16px;
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		margin-left: var(--bl);
	}
}

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

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

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

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

.wp-block-button.is-style-outline
	> .wp-block-button__link:not(.has-text-color, .has-background):hover {
	/*background-color: var(--wp--preset--color--contrast-2, var(--wp--preset--color--contrast, transparent));
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast-2, var(--wp--preset--color--contrast, currentColor));*/

	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}