/* Contact button, see layouts/shortcodes/contact.html */
:root {
	--contact-spacing: 3rem;
	--contact-padding: 1rem 2rem;
	--contact-gap: 0.25rem;
	--contact-border-width: 0.2rem;
	--contact-border-color: lightgray;
	--contact-border-color-hover: var(--color-active);
	--contact-address-size: 0.8em;
	--contact-address-opacity: 0.7;
	--contact-transition: 200ms ease-in-out;
}

diana-contact {
	display: flex;
	justify-content: center;
	margin: var(--contact-spacing) 0;
}

diana-contact a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--contact-gap);
	padding: var(--contact-padding);
	border: var(--contact-border-width) solid var(--contact-border-color);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--contact-transition);
}

diana-contact a:hover,
diana-contact a:focus-visible {
	border-color: var(--contact-border-color-hover);
}

diana-contact span {
	font-size: var(--contact-address-size);
	opacity: var(--contact-address-opacity);
}