<template>
 <Flex class="stack-group">
   <slot />
 </Flex>
</template>

<script setup>
import Flex from "../../bootstrap/cssgrid/Flex";
const props = defineProps({
  overlap: {
    type: String,
    default: "1em"
  },
  hoverScale: {
    type: Number,
    default: 1.1
  }
});
const minusOverlap = `calc(-1*${props.overlap})`;
</script>

<style scoped>
.stack-group :deep(.stack-group-item+.stack-group-item){margin-left:v-bind(minusOverlap)}:deep(.stack-group-item:hover){transform:scale(v-bind(hoverScale));z-index:1}
</style>
