/* 
<ul class="nav nav-pills">
	<li class="nav-item">
		<a class="nav-link active" aria-current="page" href="#">Active</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" href="#">Link</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" href="#">Link</a>
	</li>
	<li class="nav-item">
		<a class="nav-link disabled" aria-disabled="true">Disabled</a>
	</li>
</ul>
*/

.nav-pills.csn-nav-pills--dark {
	background-color: var(--csn-opaque-black-white-0003);
}

	.csn-nav-pills--dark .nav-item {}

	.csn-nav-pills--dark .nav-link,
	.csn-nav-pills--dark .nav-item .nav-link {
		color: var(--csn-transparent-white-0097);
	}

	.csn-nav-pills--dark .nav-link:hover,
	.csn-nav-pills--dark .nav-item .nav-link:hover {
		color: var(--csn-transparent-white-0100);
		background-color: var(--csn-opaque-black-white-0020);
	}

	.csn-nav-pills--dark .nav-link.active,
	.csn-nav-pills--dark .nav-item .nav-link.active {
		background-color: #ffffff;
		color: #000000;
		font-weight: 500;
	}