@use 'sprucecss/scss/spruce' as *;

.context-menu {
  --inset-block-start: calc(100% + 1rem);
  --inline-size: 10rem;

  @include clear-list;
  @include transition;
  background-color: color('background');
  border: 1px solid color('border');
  border-radius: config('border-radius-sm', $display);
  box-shadow: 0 0 spacer('xxs') hsl(200deg 72% 33% / 5%);
  font-size: 0.938rem;
  inline-size: var(--inline-size);
  position: absolute;
  z-index: 10;

  &--inline-start {
    inset: var(--inset-block-start) auto auto 0;
  }

  &--inline-end {
    inset: var(--inset-block-start) 0 auto auto;
  }

  > li {
    display: flex;
    flex-direction: column;
  }

  > li + li {
    border-block-start: 1px solid color('border');
    margin-block-start: 0;
  }

  &__item {
    align-items: center;
    background: none;
    block-size: 2.25rem;
    border: 0;
    border-radius: config('border-radius-sm', $display);
    color: color('text');
    display: flex;
    justify-content: space-between;
    line-height: config('line-height-md', $typography);
    margin: 0.15em;
    padding-block: 0.25em;
    padding-inline: 0.6em;
    text-decoration: none;

    &:hover:not([aria-current='page'], :has(.theme-switcher)) {
      background-color: color('background-hover', 'context');
    }

    &[aria-current='page'] {
      color: color('primary');
    }
  }
}

<div class="btn-dropdown" x-data="{ open: false }" @click.outside="open = false">
    <button class="btn btn--primary btn--icon" :aria-expanded="open" @click="open = ! open">
        Add section
        <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
    </button>
    <ul x-cloak x-show="open" x-transition class="context-menu context-menu--inline-start">
        <li>
            <button class="context-menu__item">YouTube Video</button>
        </li>
        <li>
            <button class="context-menu__item">Testimonial</button>
        </li>
    </ul>
</div>