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

    &[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;

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

        > *:not(:last-child) .coco-button-wrapper,
        > .coco-button-wrapper:not(:last-child) {
          &:not(.button-dropdown .coco-button-wrapper) {
            .coco-button {
              @apply rounded-r-none;
            }
          }
        }
      }

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