.tab-item:where(button) {
	font: inherit;
}

.tab-item:where(a) {
	text-decoration: none;
}

.tab-item:where(button, a) {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	min-height: 48px;
	padding: 0 16px;
	box-sizing: border-box;
	border: 0;
	color: var(--sui-color-neutral-primary);
	background: transparent;
	white-space: nowrap;
}

.tab-item:where(button, a) {
	cursor: pointer;
}

.tab-item:where(button, a):where(:hover) {
	background: var(--sui-color-highlight-secondary);
}

.tab-item:where(button, a):where(:focus-visible) {
	outline: 2px solid var(--sui-color-key-primary);
	outline-offset: -2px;
}

.tab-item:where(button, a):where(.active) {
	color: var(--sui-color-key-primary);
	font-weight: 600;
}

.tab-item:where(button, a):where(.active)::after {
	position: absolute;
	inset-inline: 12px;
	inset-block-end: 0;
	height: 3px;
	border-radius: 2px 2px 0 0;
	background: currentColor;
	content: "";
}

.tab-item:where(button):where(:disabled) {
	color: var(--sui-color-neutral-secondary);
	cursor: default;
}

.tab-item:where(button):where(:disabled:hover) {
	background: transparent;
}