
.wp-block-contact {
	display: flex;
	flex-direction: column;
	gap: var(--bl);

	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);
			}
		}
	}
}
