.nova-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: max(.5rem, calc(.5 * var(--su)));
}

.nova-tabs .nova-tab {
	appearance: none;
	flex-shrink: 0;
	padding: max(.5rem, calc(.5 * var(--su))) max(1rem, calc(1 * var(--su)));
	border: 1px solid var(--primary-10);
	border-radius: 4px;
	background-color: var(--neutral-80);
	color: var(--primary-100);
	font-family: 'Spline Sans Mono';
	font-size: var(--incidental-label-fontsize);
	line-height: 160%;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.nova-tabs .nova-tab:hover {
	background-color: var(--neutral-30);
}

.nova-tabs .nova-tab.is-active {
	background-color: var(--white-100);
}

.nova-tabs .nova-tab:focus-visible {
	outline: 2px solid var(--accent-100);
	outline-offset: 2px;
}

/* Onder de mobiele breuk staan de tabs onder elkaar over de volle breedte. */
@media screen and (max-width: 767px) {

	.nova-tabs {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.nova-tabs .nova-tab {
		display: flex;
		align-items: center;
		justify-content: center;
		height: max(2.75rem, calc(2.75 * var(--su)));
	}

}