.prs-join { --join-ss: 0; --join-se: 0; --join-es: 0; --join-ee: 0; display: inline-flex; align-items: stretch; & :where(.prs-join-item) { border-start-start-radius: var(--join-ss, 0); border-start-end-radius: var(--join-se, 0); border-end-end-radius: var(--join-ee, 0); border-end-start-radius: var(--join-es, 0); & * { --join-ss: var(--prs-radius-btn); --join-se: var(--prs-radius-btn); --join-es: var(--prs-radius-btn); --join-ee: var(--prs-radius-btn); } } & > .prs-join-item:where(:first-child) { --join-ss: var(--prs-radius-btn); --join-se: 0; --join-es: var(--prs-radius-btn); --join-ee: 0; } & :first-child:not(:last-child) { & :where(.prs-join-item) { --join-ss: var(--prs-radius-btn); --join-se: 0; --join-es: var(--prs-radius-btn); --join-ee: 0; } } & > .prs-join-item:where(:last-child) { --join-ss: 0; --join-se: var(--prs-radius-btn); --join-es: 0; --join-ee: var(--prs-radius-btn); } & :last-child:not(:first-child) { & :where(.prs-join-item) { --join-ss: 0; --join-se: var(--prs-radius-btn); --join-es: 0; --join-ee: var(--prs-radius-btn); } } & > .prs-join-item:where(:only-child) { --join-ss: var(--prs-radius-btn); --join-se: var(--prs-radius-btn); --join-es: var(--prs-radius-btn); --join-ee: var(--prs-radius-btn); } & :only-child { & :where(.prs-join-item) { --join-ss: var(--prs-radius-btn); --join-se: var(--prs-radius-btn); --join-es: var(--prs-radius-btn); --join-ee: var(--prs-radius-btn); } } & > :where(:not(:first-child)) .prs-join-item { margin-block-start: 0; margin-inline-start: calc(var(--prs-border-btn, 1px) * -1); } } .prs-join-item { &:where(:not(:first-child)) { margin-block-start: 0; margin-inline-start: calc(var(--prs-border-btn, 1px) * -1); } &:where(:focus-visible) { position: relative; z-index: 1; } } .prs-join-vertical { flex-direction: column; & > .prs-join-item:first-child { --join-ss: var(--prs-radius-btn); --join-se: var(--prs-radius-btn); --join-es: 0; --join-ee: 0; } & :first-child:not(:last-child) { & .prs-join-item { --join-ss: var(--prs-radius-btn); --join-se: var(--prs-radius-btn); --join-es: 0; --join-ee: 0; } } & > .prs-join-item:last-child { --join-ss: 0; --join-se: 0; --join-es: var(--prs-radius-btn); --join-ee: var(--prs-radius-btn); } & :last-child:not(:first-child) { & .prs-join-item { --join-ss: 0; --join-se: 0; --join-es: var(--prs-radius-btn); --join-ee: var(--prs-radius-btn); } } & > .prs-join-item:only-child { --join-ss: var(--prs-radius-btn); --join-se: var(--prs-radius-btn); --join-es: var(--prs-radius-btn); --join-ee: var(--prs-radius-btn); } & :only-child { & .prs-join-item { --join-ss: var(--prs-radius-btn); --join-se: var(--prs-radius-btn); --join-es: var(--prs-radius-btn); --join-ee: var(--prs-radius-btn); } } & > :where(:not(:first-child)) .prs-join-item { margin-block-start: calc(var(--prs-border-btn, 1px) * -1); margin-inline-start: 0; } & .prs-join-item { &:where(:not(:first-child)) { margin-block-start: calc(var(--prs-border-btn, 1px) * -1); margin-inline-start: 0; } } }