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

	a {
		display: flex;
		align-items: center;
		gap: var(--bl);
		text-decoration: none;
		font-size: var(--wp--preset--font-size--large);
		transition: all .3s;

		&:hover {
			color: var(--wp--preset--color--accent);
		}
	}

	svg {
		flex-shrink: 0;
		width: 24px;
		height: 24px;

		path {
			fill: var(--wp--preset--color--accent);
			transition: all .3s;
		}
	}

	&.contact-design--button a {
		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);
		text-transform: uppercase;
		line-height: 1.25;

		svg {
			width: 16px;
			height: 16px;

			path {
				fill: var(--wp--preset--color--base);
			}
		}

		&:hover,
		&:focus {
			background-color: var(--wp--preset--color--accent-2);
			border-color: var(--wp--preset--color--accent-2);
		}
	}

	&.info-hidden {
		a {
			padding: var(--bl);
		}
	}

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

		a {
			flex-direction: column;
			align-items: flex-start;
			gap: 0;
			color: var(--wp--preset--color--text);

			span {
				color: var(--wp--preset--color--contrast);
				font-size: var(--wp--preset--font-size--heading-3);
				font-family: var(--wp--preset--font-family--barlow-semi-condensed);
			}

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

	&.color--dark a {
		color: var(--wp--preset--color--contrast);

		path {
			fill: var(--wp--preset--color--contrast);
		}

		&:hover {
			color: var(--wp--preset--color--dark-grey);

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

	&.color--light a {
		color: var(--wp--preset--color--base);

		path {
			fill: var(--wp--preset--color--base);
		}

		&:hover {
			color: var(--wp--preset--color--light-grey);

			path {
				fill: var(--wp--preset--color--light-grey);
			}
		}
	}
}

header .header-contact-buttons .wp-block-contact a {
	transition: 0.3s;

	color: var(--wp--preset--color--base);

	svg path {
		fill: var(--wp--preset--color--base);
		transition: 0.3s;
	}

	&:hover {
		color: var(--wp--preset--color--accent);

		svg path {
			fill: var(--wp--preset--color--accent);
		}
	}
}