---
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;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(0,217,255,0.24);
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(0,217,255,0.10), rgba(0,217,255,0.04)),
      rgba(127,127,127,0.06);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 0 0 1px rgba(0,217,255,0.04);
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
    transition:
      transform 120ms ease,
      background 120ms ease,
      border-color 120ms ease,
      box-shadow 120ms ease;
  }

  .glossary-portal-cta:hover{
    transform: translateY(-1px);
    border-color: rgba(0,217,255,0.34);
    background:
      linear-gradient(180deg, rgba(0,217,255,0.14), rgba(0,217,255,0.06)),
      rgba(127,127,127,0.08);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 0 0 1px rgba(0,217,255,0.08),
      0 10px 28px rgba(0,0,0,0.18);
    text-decoration: none;
  }

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

  @media (max-width: 720px){
    .glossary-portal-cta{
      width: 100%;
    }
  }

  @media (prefers-color-scheme: dark){
    .glossary-portal-cta{
      background:
        linear-gradient(180deg, rgba(0,217,255,0.12), rgba(0,217,255,0.05)),
        rgba(255,255,255,0.04);
    }

    .glossary-portal-cta:hover{
      background:
        linear-gradient(180deg, rgba(0,217,255,0.16), rgba(0,217,255,0.07)),
        rgba(255,255,255,0.06);
    }
  }
</style>