<script lang="ts" setup>
import type { HTMLAttributes } from "vue";
import { defineProps } from "vue";

defineProps<{
  class?: HTMLAttributes["class"];
}>();
</script>

<template>
  <li role="presentation" aria-hidden="true" :class="$props.class">
    <slot>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="color: var(--gray-50)">
        <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
      </svg>
    </slot>
  </li>
</template>

<style lang="scss" scoped>
li {
  line-height: var(--spacing-0);
  & > svg {
    width: var(--spacing-3);
  }
}
</style>
