---
import { ChevronRight } from '@images/components'

type Props = {
  href: string
}

const { href } = Astro.props
---

<style>
  .postMore {
    display: inline-block;
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-headings);
    font-size: calc(var(--font-size-base) * 0.9);
    color: var(--link-color);
    text-transform: uppercase;
    margin-top: var(--spacer);
  }

  .postMore svg {
    display: inline-block;
    margin: 0;
    top: 0.25rem;
    position: relative;
    stroke: var(--text-color-light);
    transition: 0.2s ease-out;
    width: 20px;
    height: 20px;
  }

  .postMore:hover svg,
  .postMore:focus svg {
    transform: translate3d(0.2rem, 0, 0);
  }
</style>

<a class="postMore" href={href}>
  <slot />
  <ChevronRight />
</a>