---
import Exit from "@/assets/icons/exit_person.svg";

interface Props {
  backlink?: string;
}

const { backlink = "../" } = Astro.props;
---

<nav class="topbar flex">
  <a href={backlink} class="topbar-btn left" aria-label="go back">
    <Exit />
  </a>
</nav>

<style>
  .topbar {
    position: sticky;
    top: 0;
    z-index: 99;
    justify-content: space-between;
  }

  .topbar-btn {
    padding: 0.5rem;
    color: var(--c-light);
    background-color: var(--c-black);
    border: solid;
    transition: 300ms;
    &:hover {
      box-shadow: 0px 0px 0.65em inset var(--c-medium);
    }
    & svg {
      width: 1.5rem;
      fill: var(--c-light);
    }
    &.left {
      border-width: 0px 1px 1px 0;
      border-radius: 0 0 20% 0;
    }
  }
</style>