---
interface Props {
  className?: string;
  href?: string;
}

const { className = '', href } = Astro.props;
---

{
  href !== undefined ? (
    <a href={href} class:list={['clean', 'btn', className]}>
      <slot />
    </a>
  ) : (
    <button class:list={className}>
      <slot />
    </button>
  )
}

<style lang="scss">
  button,
  .btn {
    display: inline-block;
    text-decoration: none;
    font-size: 1rem;
    padding: var(--prj-spacing-1) var(--prj-spacing-3);
    background-color: var(--prj-accent-bg);
    color: var(--prj-accent-text);

    border-radius: 6px;
    border: 1px solid var(--prj-accent-bg);

    cursor: pointer;

    margin-bottom: 0;
    box-shadow: 0 0 0px 0px var(--prj-accent-bg);

    transition: color 0.2s, background-color 0.2s, translate 0.2s,
      box-shadow 0.2s;

    &:hover {
      --anim-translation-value: -5px;
      background-color: transparent;
      color: var(--prj-text);
      translate: var(--anim-translation-value) var(--anim-translation-value);
      box-shadow: calc(var(--anim-translation-value) * -2)
        calc(var(--anim-translation-value) * -2) 0px 0px var(--prj-accent-bg);
    }
  }
</style>