<template>
  <div class="cpButtonGroup" :class="dynamicClasses">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg'
}

const props = withDefaults(defineProps<Props>(), {
  size: 'md',
})

const dynamicClasses = computed(() => `cpButtonGroup--${props.size}`)
</script>

<style lang="scss">
.cpButtonGroup {
  display: flex;
  align-items: flex-start;
  border-radius: var(--cp-radius-md);
  box-shadow: 0 0 0 fn.px-to-rem(1) var(--cp-border-soft);

  &--2xs {
    border-radius: var(--cp-radius-sm-md);
  }

  &--xs,
  &--sm,
  &--md {
    border-radius: var(--cp-radius-md);
  }

  &--lg {
    border-radius: var(--cp-radius-md-lg);
  }

  > * {
    position: relative;

    &:not(:first-child, :only-child)::before {
      position: absolute;
      top: fn.px-to-rem(-1);
      left: fn.px-to-rem(-1);
      width: fn.px-to-rem(1);
      height: calc(100% + fn.px-to-rem(2));
      background-color: var(--cp-border-soft);
      content: '';
    }
  }
}
</style>
