---
interface Props {
  id: string;
  'aria-label': string;
}

const { id, 'aria-label': ariaLabel } = Astro.props;
---

<button popovertarget={id} aria-label={ariaLabel}>
  <slot name="icon" />
</button>

<div {id} popover>
  <slot />
</div>

<style lang="scss">
  @use '../styles/mixins.scss' as *;

  button {
    display: inline-grid;
    place-items: center;
    inline-size: 48px;
    block-size: 48px;

    border-radius: 999px;
    border: none;
    background-color: transparent;

    user-select: none;
    cursor: pointer;

    &:has(+ :popover-open) {
      background-color: var(--color-100);
    }
    @include focus-hover {
      background-color: var(--color-100);
    }

    :global(svg) {
      width: 20px;
      height: 20px;
    }
  }

  div {
    background-color: var(--color-100);
    box-shadow: 0 3px 0 0 var(--color-400);
    border: 1px solid var(--color-400);
    border-radius: 1.5rem;

    position-area: end span-start;
    margin-block-start: 0.25rem;

    transition:
      opacity,
      transform,
      overlay allow-discrete,
      display allow-discrete;
    transition-duration: 200ms;

    opacity: 0;
    transform: translate(0.5rem, -1rem) scale(0.9);

    &:popover-open {
      opacity: 1;
      transform: translate(0, 0) scale(1);

      @starting-style {
        opacity: 0;
        transform: translate(0.5rem, -1rem) scale(0.9);
      }
    }
  }
</style>