---
interface Props {
  keywords: string[];
}

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

<p>
  {keywords.map((x) => <span>#<b>{x}</b></span>)}
</p>

<style>
  p {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    gap: calc(var(--size-0) * 1em);

    & > * {
      border-radius: calc(infinity * 1px);
      background-color: color-mix(
        in srgb,
        var(--color-active) 10%,
        transparent
      );
      color: var(--color-active);
      padding-inline: calc(var(--size-2) * 1em);
    }
  }
</style>