---
interface Props {
	href: string;
}

const { href } = Astro.props;
---

<a href={href}><slot /></a>

<style>
	a {
		position: relative;
		display: flex;
		place-content: center;
		text-align: center;
		padding: 0.56em 2em;
		gap: 0.8em;
		color: var(--accent-text-over);
		text-decoration: none;
		line-height: 1.1;
		border-radius: 999rem;
		overflow: hidden;
		background: var(--gradient-accent-orange);
		box-shadow: var(--shadow-md);
		white-space: nowrap;
	}

	@media (min-width: 20em) {
		a {
			font-size: var(--text-lg);
		}
	}

	a::after {
		content: '';
		position: absolute;
		inset: 0;
		pointer-events: none;
		transition: background-color var(--theme-transition);
		mix-blend-mode: overlay;
	}

	a:focus::after,
	a:hover::after {
		background-color: hsla(var(--gray-999-basis), 0.3);
	}

	@media (min-width: 50em) {
		a {
			padding: 1.125rem 2.5rem;
			font-size: var(--text-xl);
		}
	}
</style>