.wp-block-contact {
	display: flex;
	flex-direction: column;
	gap: var(--bl);

	.wp-block-contact__wrap {
		display: inline-flex;
/*		align-items: center;*/
		gap: calc(var(--bl)*.5);
		margin: 0;
		text-decoration: none;
		transition: all .3s;
	}

	.wp-block-contact__info,
	.wp-block-contact__label {
		color: var(--wp--preset--color--accent);
		transition: all .3s;
	}

	.wp-block-contact__label {
		font-weight: bold;
	}

	a:hover .wp-block-contact__info {
		color: var(--wp--preset--color--accent-2);
	}

	svg {
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		margin-top: 2px;
		path {
			fill: var(--wp--preset--color--accent-2);
			transition: all .3s;
		}
	}

	&.contact-design--button .wp-block-contact__wrap {
		align-items: center;
	    font-size: var(--wp--preset--font-size--body);
		padding: var(--bl) calc(var(--bl)*2);
		background-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--accent);
    	line-height: 1.25;

		svg {
			width: 16px;
			height: 16px;
			path {
				fill: var(--wp--preset--color--base);
			}
		}
	}

	&.contact-design--button a:hover,
	&.contact-design--button a:focus {
		background-color: var(--wp--preset--color--accent-2);
		border-color: var(--wp--preset--color--accent-2);
	}

	&.info-hidden {
		.wp-block-contact__wrap {
			padding: var(--bl);
		}
	}

	&.contact-layout--horizontal {
		flex-direction: row;
		gap: var(--bl);
		>* {
			border-left: 1px solid var(--wp--preset--color--accent);
			padding-left: var(--bl);
		}

		&.contact-colour--light > * { border-color: var(--wp--preset--color--base); }
		&.contact-colour--dark > * { border-color: var(--wp--preset--color--contrast); }
	}

	&.contact-direction--vertical {
		.wp-block-contact__detail:not(:first-child) {
			margin-top: var(--col-gap);
		}

		.wp-block-contact__wrap {
		    flex-direction: column;
		    align-items: flex-start;
		    gap: 0;
		    color: var(--wp--preset--color--text);
		    .wp-block-contact__info,
		    span {
		    	color: var(--wp--preset--color--contrast);
		    	font-size: var(--wp--preset--font-size--heading-3);
		    }

		    svg {
		    	width: 34px;
		    	height: 34px;
		    	margin-bottom: var(--bl);
		    }
		}
	}

	&.contact-colour--dark {
		.wp-block-contact__wrap,
		.wp-block-contact__info,
		.wp-block-contact__label {
			color: var(--wp--preset--color--contrast);
			path {
				fill: var(--wp--preset--color--contrast);
			}
		}

		a:hover {
			color: var(--wp--preset--color--dark-grey);
			path {
				fill: var(--wp--preset--color--dark-grey);
			}
		}

		&.contact-design--button .wp-block-contact__wrap {
			background-color: var(--wp--preset--color--contrast);
			border-color: var(--wp--preset--color--contrast);
			color: var(--wp--preset--color--base);
		}

		&.contact-design--button a:hover {
			background-color: var(--wp--preset--color--dark-grey);
			border-color: var(--wp--preset--color--dark-grey);
			color: var(--wp--preset--color--base);
		}
	}

	&.contact-colour--light {
		.wp-block-contact__wrap,
		.wp-block-contact__info,
		.wp-block-contact__label {
			color: var(--wp--preset--color--base);
			path {
				fill: var(--wp--preset--color--accent-2);
			}
		}

		a:hover {
			color: var(--wp--preset--color--accent-2);
			path {
				fill: var(--wp--preset--color--accent-2);
			}
		}

		&.contact-design--button .wp-block-contact__wrap {
			background-color: var(--wp--preset--color--base);
			border-color: var(--wp--preset--color--base);
			color: var(--wp--preset--color--contrast);
		}

		&.contact-design--button a:hover {
			background-color: var(--wp--preset--color--light-grey);
			border-color: var(--wp--preset--color--light-grey);
			color: var(--wp--preset--color--contrast);
		}
	}
}