---
import FishSilhouette from "./FishSilhouette.astro";
import WaterbodyMark from "./WaterbodyMark.astro";

const { waterbody, fish } = Astro.props as { waterbody: string; fish: string };
---

<span class="atlas-pair-mark" aria-hidden="true">
  <span class="atlas-pair-mark__water"><WaterbodyMark identity={waterbody} size={104} /></span>
  <span class="atlas-pair-mark__fish"><FishSilhouette name={fish} size={78} /></span>
  <i>×</i>
</span>

<style>
  .atlas-pair-mark { position: relative; display: block; width: 128px; height: 74px; }
  .atlas-pair-mark__water { position: absolute; inset: 15px auto auto 0; color: var(--lime); }
  .atlas-pair-mark__water :global(.waterbody-mark) { position: static; opacity: .72; stroke: currentColor; }
  .atlas-pair-mark__water :global(.waterbody-mark text) { fill: var(--white); opacity: .8; }
  .atlas-pair-mark__fish { position: absolute; right: -2px; top: -6px; color: var(--white); filter: drop-shadow(0 3px 7px #06191c); }
  .atlas-pair-mark__fish :global(.fish-silhouette) { position: static; opacity: .92; }
  i { position: absolute; right: 2px; bottom: 0; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--deep); font: 800 11px/1 Inter, sans-serif; }
  @media (max-width: 720px) {
    .atlas-pair-mark { width: 94px; height: 55px; transform: scale(.73); transform-origin: center; }
  }
</style>