---
const { props } = Astro
---

<style>
  .hamburger {
    width: 24px;
    height: 24px;
    display: inline-block;
    position: relative;
    transform: rotate(0deg);
    cursor: pointer;
    margin-top: calc(var(--spacer) / 2);
  }

  .line {
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    border-bottom: var(--border-width) solid var(--text-color-light);
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: 0.2s var(--easing);
  }

  .line:nth-child(1) {
    top: 0;
    transform-origin: left center;
  }

  .line:nth-child(2) {
    top: 7px;
    transform-origin: left center;
  }

  .line:nth-child(3) {
    top: 14px;
    transform-origin: left center;
  }

  /* open state */
  :global(.has-menu-open) .line:nth-child(1) {
    transform: rotate(45deg);
    top: -1px;
  }

  :global(.has-menu-open) .line:nth-child(2) {
    width: 0%;
    opacity: 0;
  }

  :global(.has-menu-open) .line:nth-child(3) {
    transform: rotate(-45deg);
    top: 16px;
  }

  .button {
    padding: calc(var(--spacer) / 2);
    vertical-align: middle;
    display: inline-block;
    margin: 0;
    margin-right: -1rem;
  }

  .button:hover,
  .button:focus {
    outline: 0;
  }

  .button:hover .line,
  .button:focus .line {
    border-color: var(--link-color);
  }
</style>

<button type="button" title="Menu" class="button" {...props}>
  <span class="hamburger">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
  </span>
</button>