@layer components {
  [data-coco][data-component="button-group"] {
    width: fit-content;
    border-radius: 44px;

    &[data-collapsible="true"] {
      @apply opacity-0;

      &.button-group-ready {
        @apply opacity-100;
      }
    }

    .button-group-buttons {
      @apply flex items-center gap-x-2;
      width: fit-content;
    }

    .divider {
      @apply w-0 border-l border-coco-gray-300 self-stretch;
    }

    &[data-reversed="true"] {
      .button-group-buttons {
        @apply flex-row-reverse;
      }
    }

    &[data-align="end"] {
      .button-group-buttons {
        @apply ml-auto;
      }
    }

    &[data-segmented="true"] {
      .button-group-buttons {
        @apply gap-x-0;
      }

      .coco-button-wrapper:not(:first-child) .coco-button {
        @apply rounded-l-none border-l-0;
      }

      .coco-button-wrapper:not(:last-child) .coco-button {
        @apply rounded-r-none;
      }

      &[data-floating="true"] {
        @apply shadow-lg;
      }
    }
  }
}