Copy

<script setup lang="ts">
const props = defineProps<{
  label: string;
  checked: boolean;
}>();
</script>
<template>
  <button :class="{ checked: checked }">
    <slot>
      {{ label }}
    </slot>
  </button>
</template>

<style scoped>
@reference "src/style.css";

button {
  @apply text-muted flex h-8 cursor-pointer items-center gap-2 rounded-none border border-r-0 border-stone-700 bg-stone-900/70 px-3 text-xs font-semibold select-none;

  &.checked {
    @apply bg-primary-500/20 text-primary-200 border-primary-300/80 hover:text-primary-100;
  }

  &:first-of-type {
    @apply rounded-l border-l;
  }

  &:last-of-type {
    @apply rounded-r border-r;
  }

  &:hover {
    @apply text-stone-300;
  }
}
</style>