.join {
	@apply inline-flex items-stretch;
	--join-ss: 0;
	--join-se: 0;
	--join-es: 0;
	--join-ee: 0;

	:where(.join-item) {
		border-start-start-radius: var(--join-ss, 0);
		border-start-end-radius: var(--join-se, 0);
		border-end-start-radius: var(--join-es, 0);
		border-end-end-radius: var(--join-ee, 0);
		* {
			--join-ss: var(--radius-field);
			--join-se: var(--radius-field);
			--join-es: var(--radius-field);
			--join-ee: var(--radius-field);
		}
	}

	> .join-item:where(:first-child) {
		--join-ss: var(--radius-field);
		--join-se: 0;
		--join-es: var(--radius-field);
		--join-ee: 0;
	}

	:first-child:not(:last-child) {
		:where(.join-item) {
			--join-ss: var(--radius-field);
			--join-se: 0;
			--join-es: var(--radius-field);
			--join-ee: 0;
		}
	}

	> .join-item:where(:last-child) {
		--join-ss: 0;
		--join-se: var(--radius-field);
		--join-es: 0;
		--join-ee: var(--radius-field);
	}

	:last-child:not(:first-child) {
		:where(.join-item) {
			--join-ss: 0;
			--join-se: var(--radius-field);
			--join-es: 0;
			--join-ee: var(--radius-field);
		}
	}

	> .join-item:where(:only-child) {
		--join-ss: var(--radius-field);
		--join-se: var(--radius-field);
		--join-es: var(--radius-field);
		--join-ee: var(--radius-field);
	}

	:only-child {
		:where(.join-item) {
			--join-ss: var(--radius-field);
			--join-se: var(--radius-field);
			--join-es: var(--radius-field);
			--join-ee: var(--radius-field);
		}
	}

	> :where(:focus, :has(:focus)) {
		z-index: 1;
	}

	@media (hover: hover) {
		> :where(.btn:hover, :has(.btn:hover)) {
			isolation: isolate;
		}
	}
}

.join-item {
	&:where(*:not(:first-child, :disabled, [disabled], .btn-disabled)) {
		margin-inline-start: calc(var(--border, 1px) * -1);
		margin-block-start: 0;
	}

	&:where(*:is(:disabled, [disabled], .btn-disabled)) {
		border-width: var(--border, 1px) 0 var(--border, 1px) var(--border, 1px);
	}
}

.join-vertical {
	@apply flex-col;

	> .join-item:first-child {
		--join-ss: var(--radius-field);
		--join-se: var(--radius-field);
		--join-es: 0;
		--join-ee: 0;
	}

	:first-child:not(:last-child) {
		.join-item {
			--join-ss: var(--radius-field);
			--join-se: var(--radius-field);
			--join-es: 0;
			--join-ee: 0;
		}
	}

	> .join-item:last-child {
		--join-ss: 0;
		--join-se: 0;
		--join-es: var(--radius-field);
		--join-ee: var(--radius-field);
	}

	:last-child:not(:first-child) {
		.join-item {
			--join-ss: 0;
			--join-se: 0;
			--join-es: var(--radius-field);
			--join-ee: var(--radius-field);
		}
	}

	> .join-item:only-child {
		--join-ss: var(--radius-field);
		--join-se: var(--radius-field);
		--join-es: var(--radius-field);
		--join-ee: var(--radius-field);
	}

	:only-child {
		.join-item {
			--join-ss: var(--radius-field);
			--join-se: var(--radius-field);
			--join-es: var(--radius-field);
			--join-ee: var(--radius-field);
		}
	}

	.join-item {
		&:where(*:not(:first-child)) {
			margin-inline-start: 0;
			margin-block-start: calc(var(--border, 1px) * -1);
		}
	}
}

.join-horizontal {
	@apply flex-row;

	> .join-item:first-child {
		--join-ss: var(--radius-field);
		--join-se: 0;
		--join-es: var(--radius-field);
		--join-ee: 0;
	}

	:first-child:not(:last-child) {
		.join-item {
			--join-ss: var(--radius-field);
			--join-se: 0;
			--join-es: var(--radius-field);
			--join-ee: 0;
		}
	}

	> .join-item:last-child {
		--join-ss: 0;
		--join-se: var(--radius-field);
		--join-es: 0;
		--join-ee: var(--radius-field);
	}

	:last-child:not(:first-child) {
		.join-item {
			--join-ss: 0;
			--join-se: var(--radius-field);
			--join-es: 0;
			--join-ee: var(--radius-field);
		}
	}

	> .join-item:only-child {
		--join-ss: var(--radius-field);
		--join-se: var(--radius-field);
		--join-es: var(--radius-field);
		--join-ee: var(--radius-field);
	}

	:only-child {
		.join-item {
			--join-ss: var(--radius-field);
			--join-se: var(--radius-field);
			--join-es: var(--radius-field);
			--join-ee: var(--radius-field);
		}
	}

	.join-item {
		&:where(*:not(:first-child)) {
			margin-inline-start: calc(var(--border, 1px) * -1);
			margin-block-start: 0;
		}
	}
}