.join {
  @apply inline-flex items-stretch;
  & :where(.join-item) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-end-start-radius: 0;
    border-start-start-radius: 0;
  }
  & .join-item:not(:first-child):not(:last-child),
  & *:not(:first-child):not(:last-child) .join-item {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-end-start-radius: 0;
    border-start-start-radius: 0;
  }

  & .join-item:first-child:not(:last-child),
  & *:first-child:not(:last-child) .join-item {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  & .dropdown .join-item:first-child:not(:last-child),
  & *:first-child:not(:last-child) .dropdown .join-item {
    border-start-end-radius: inherit;
    border-end-end-radius: inherit;
  }

  & :where(.join-item:first-child:not(:last-child)),
  & :where(*:first-child:not(:last-child) .join-item) {
    border-end-start-radius: inherit;
    border-start-start-radius: inherit;
  }

  & .join-item:last-child:not(:first-child),
  & *:last-child:not(:first-child) .join-item {
    border-end-start-radius: 0;
    border-start-start-radius: 0;
  }

  & :where(.join-item:last-child:not(:first-child)),
  & :where(*:last-child:not(:first-child) .join-item) {
    border-start-end-radius: inherit;
    border-end-end-radius: inherit;
  }
}

@supports not selector(:has(*)) {
  :where(.join *) {
    @apply rounded-[inherit];
  }
}

@supports selector(:has(*)) {
  :where(.join *:has(.join-item)) {
    @apply rounded-[inherit];
  }
}
