---
export interface Props {
  href: string;
  label: string;
  icon?: string;
  className?: string;
}

const {
  href,
  label,
  icon = "↗",
  className,
} = Astro.props;
---

<a class:list={["glossary-portal-cta", className]} href={href}>
  <span>{label}</span>
  <span aria-hidden="true">{icon}</span>
</a>

<style>
  .glossary-portal-cta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 7px 14px;
    border: 1px solid rgba(127,127,127,0.24);
    border-radius: 999px;
    background: rgba(127,127,127,0.05);
    text-decoration: none;
    line-height: 1.2;
    transition:
      transform 120ms ease,
      background 120ms ease,
      border-color 120ms ease;
  }

  .glossary-portal-cta:hover{
    transform: translateY(-1px);
    background: rgba(127,127,127,0.08);
    border-color: rgba(0,217,255,0.18);
    text-decoration: none;
  }

  .glossary-portal-cta:focus-visible{
    outline: 2px solid rgba(0,217,255,0.28);
    outline-offset: 3px;
  }

  @media (max-width: 760px){
    .glossary-portal-cta{
      min-height: 36px;
      padding: 6px 12px;
      font-size: 12px;
    }
  }

  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
    .glossary-portal-cta{
      min-height: 32px;
      padding: 5px 10px;
      font-size: 11px;
    }
  }
</style>