firq-dev-website/src/components/links/linkCard.astro

---
import type { ImageMetadata } from 'astro'


export interface Props {
  text: string
  icon: ImageMetadata
  link: string
}

const { text, icon, link } = Astro.props
const icon_src_url = `url("${icon.src}")`

---

<a href={link} target="_blank" rel="noopener noreferrer">
  <div class="icon"></div>
  <span class="visually-hidden">{text}</span>
</a>

<style define:vars={{ icon_src_url }}>
  * {
    transition: all var(--a-time-default) var(--a-animation-1);
  }
  a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25em;
    height: 2.25em;
    background-color: var(--c-primary-background);
    border-radius: .35rem;
    border: 2px solid var(--c-primary-text);
  }

  a:hover {
    border-color: var(--c-accent-1);
    & .icon {
      background: var(--c-accent-1);
    }
  }

  .icon {
    mask: var(--icon_src_url) no-repeat center;
    mask-size: contain;
    background-color: var(--c-primary-text);
    height: 1.5em;
    width: 1.5em;
  }
</style>