<script setup lang="ts">
interface Props {
  col?: boolean;
  grid?: boolean;
}

defineProps<Props>();
</script>

<template>
  <div class="btn-group" :class="{ col: col, grid: grid }">
    <slot></slot>
  </div>
</template>

<style lang="scss">
.btn-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;

  &.col {
    flex-flow: column nowrap;
  }

  &.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0;

    > * {
      margin: 0;
    }
  }

  > * {
    flex: var(--button-group-flex);
    margin: 1rem 0;
  }
}
</style>
