.x-group {
  display: flex;
  border-radius: var(--radius-xl);

  &:has(.x-control) {
    > :where(.x-button) {
      min-inline-size: var(--x-control-block-size);
      height: auto;
    }

    > :is(.x-button) {
      --x-button-border-width: var(--x-control-border-width);
    }
  }

  > :where(*) {
    border-radius: inherit;

    &:is(.x-control) {
      --x-control-border-color-mix: var(--color-body-primary);
    }

    &:is(.x-button) {
      --x-button-focus-outline-offset: 0;
    }

    &:focus-within {
      z-index: 1;
    }

    &:where(:not(:first-child)) {
      margin-inline-start: calc(var(--x-control-border-width) * -1);
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }

    &:where(:not(:last-child)) {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
  }
}