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

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

	.wp-block-button__link {
		background-color: var(--colour1);
		border-color: var(--colour1);
		color: var(--colour2);

		&:hover,
		&:focus {
			background-color: var(--colour3);
			border-color: var(--colour3);
		}
	}

	&.button-style--outline .wp-block-button__link {
		background-color: transparent;
		border-color: var(--colour1);
		color: var(--colour1);

		&:hover,
		&:focus {
			background-color: var(--colour1);
			color: var(--colour2);
		}
	}

	&.button-style--empty .wp-block-button__link {
		background-color: transparent;
		border-color: transparent;
		color: var(--colour1);
		padding: 0;

		&:hover,
		&:focus {
			color: var(--colour2);
		}
	}
}

.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 {
	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);
}

.button-wave {
	position: absolute;
	top: -1000px;
	left: -1000px;
	opacity: 0;
	transition: opacity .3s;
	z-index: 1000;
	width: 800px;
	height: 800px;
	pointer-events: none;

	span {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 100%;
		width: 300px;
		height: 300px;
		border: 1px solid var(--wp--preset--color--accent);
		filter: brightness(1.2);
		opacity: 0;

		animation-duration: .7s;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-fill-mode: forwards;
		/*  		animation-timing-function: cubic-bezier(0, 0, 0, 1);*/
		animation-timing-function: linear;
		animation-delay: 0s;

		&:nth-child(2) {
			animation-delay: .15s;
		}

		&:nth-child(3) {
			animation-delay: .3s;
		}
	}

	&.show {
		opacity: 1;

		span {
			animation-name: expandLarge;
		}
	}
}

@keyframes expandLarge {
	0% {
		width: 300px;
		height: 300px;
		opacity: 1;
	}

	100% {
		width: 800px;
		height: 800px;
		opacity: 0;
	}
}