---
// Copyright © onWidget <https://github.com/onwidget>
// SPDX-License-Identifier: MIT
export interface Props {
    label?: string;
    class?: string;
}

const {
    label = "Toggle Menu",
    class:
        className = "flex flex-col h-12 w-12 rounded justify-center items-center cursor-pointer group",
} = Astro.props;
---

<button type="button" class={className} aria-label={label} data-aw-toggle-menu>
  <span class="sr-only">{label}</span>
  <slot>
    <span
      aria-hidden="true"
      class="h-0.5 w-6 my-1 rounded-full bg-black dark:bg-white transition ease transform duration-200 opacity-80 group-[.expanded]:rotate-45 group-[.expanded]:translate-y-2.5"
    ></span>
    <span
      aria-hidden="true"
      class="h-0.5 w-6 my-1 rounded-full bg-black dark:bg-white transition ease transform duration-200 opacity-80 group-[.expanded]:opacity-0"
    ></span>
    <span
      aria-hidden="true"
      class="h-0.5 w-6 my-1 rounded-full bg-black dark:bg-white transition ease transform duration-200 opacity-80 group-[.expanded]:-rotate-45 group-[.expanded]:-translate-y-2.5"
    ></span>
  </slot>
</button>
