@use 'sass:color';
@use 'sprucecss/scss/spruce' as *;

.lang-switcher {
  $this: &;
  min-inline-size: 2.875rem;
  position: relative;
  text-transform: uppercase;

  &--upward {
    #{$this}__panel {
      inset: auto 0 120% auto;
    }

    svg {
      rotate: 180deg;
    }
  }

  &__control {
    @include clear-btn;
    align-items: center;
    border-radius: config('border-radius', $btn);
    color: color('heading');
    display: flex;
    gap: spacer('xxs');
    text-transform: uppercase;

    &:focus-visible {
      @include short-ring('button');
    }
  }

  &__panel {
    @include clear-list;
    background-color: hsl(0deg 0% 0%);
    border-radius: config('border-radius-sm', $display);
    inset: 120% 0 auto auto;
    padding-block: spacer('xxs');
    position: absolute;

    > * + * {
      margin-block-start: 0;
    }

    li {
      line-height: 1;
    }

    a {
      color: hsl(0deg 0% 100%);
      display: flex;
      padding-block: spacer('xxs');
      padding-inline: spacer('s');
      text-decoration: none;

      &:hover {
        color: color.adjust(color('primary', $only-color: true), $lightness: 40%);
      }
    }
  }

  svg {
    --size: 1em;
    block-size: var(--size);
    color: color('primary');
    inline-size: var(--size);
  }
}

<div @click.outside="open = false" @keyup.escape.window="open = false" class="lang-switcher" x-data="{ open: false }">
    <button @click="open = ! open" :aria-expanded="open" aria-label="English" aria-expanded="false" class="lang-switcher__control" type="button">
        en
        <svg 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' class='icon'>
            <polyline points='6 9 12 15 18 9'></polyline>
        </svg>
    </button>
    <ul class="lang-switcher__panel" x-cloak x-trap="open" x-show="open" x-transition.origin.top.leff>
        <li>
            <a hreflang="de" href="/de/" aria-label="German">de</a>
        </li>
        <li>
            <a hreflang="fr" href="/fr/" aria-label="French">fr</a>
        </li>
    </ul>
</div>