.join.join-vertical {
  @apply flex-col;
  & .join-item:first-child:not(:last-child),
  & *:first-child:not(:last-child) .join-item {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
  & .join-item:first-child:not(:last-child),
  & *:first-child:not(:last-child) .join-item {
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
  }
  & .join-item:last-child:not(:first-child),
  & *:last-child:not(:first-child) .join-item {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }
  & .join-item:last-child:not(:first-child),
  & *:last-child:not(:first-child) .join-item {
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
  }
}

.join.join-horizontal {
  @apply flex-row;
  & .join-item:first-child:not(:last-child),
  & *:first-child:not(:last-child) .join-item {
    border-end-end-radius: 0;
    border-start-end-radius: 0;
  }
  & .join-item:first-child:not(:last-child),
  & *: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;
  }
  & .join-item:last-child:not(:first-child),
  & *:last-child:not(:first-child) .join-item {
    border-end-end-radius: inherit;
    border-start-end-radius: inherit;
  }
}
