<script setup lang="ts">
import { inject, Ref } from "vue";
const sizeDropDown = inject<Ref<string>>("sizeDropDown");
</script>

<template>
  <div :class="`size-${sizeDropDown}`" class="gr-drop-item" tabindex="0">
    <slot />
  </div>
</template>

<style scoped lang="scss">
.gr-drop-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: var(--spacing-1-5) var(--spacing-2) var(--spacing-1-5) var(--spacing-2);
  width: var(--w-full);
  transition: var(--transition);

  &.size-sm {
    padding: var(--spacing-1) var(--spacing-1-5) var(--spacing-1) var(--spacing-1-5);
  }

  &.size-md {
    padding: var(--spacing-1-5) var(--spacing-2) var(--spacing-1-5) var(--spacing-2);
  }

  &.size-lg {
    padding: var(--spacing-2) var(--spacing-1-5) var(--spacing-2) var(--spacing-1-5);
  }

  &:focus-visible {
    transition: none;
    outline: 0px solid transparent;
    background: rgb(229, 231, 231, 0.35);
  }

  &:hover {
    background: rgb(229, 231, 231, 0.35);
  }
}
</style>
