.ncs-wrapper {
	--ncs-icon-size: 60px;
	--ncs-item-gap: 30px;

	overflow-x: auto;
	overflow-y: hidden;
	width: 100%;
	cursor: grab;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
	user-select: none;
}

.ncs-wrapper::-webkit-scrollbar {
	display: none;
}

.ncs-wrapper.ncs-dragging {
	cursor: grabbing;
}

.ncs-track {
	display: flex;
	align-items: flex-start;
	gap: var( --ncs-item-gap );
	width: max-content;
	padding: 10px 4px;
}

.ncs-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	text-decoration: none;
	color: inherit;
	flex: 0 0 auto;
	width: calc( var( --ncs-icon-size ) + 20px );
	transition: transform 0.2s ease;
}

a.ncs-item:hover {
	transform: translateY( -4px );
}

.ncs-item-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --ncs-icon-size );
	height: var( --ncs-icon-size );
	border-radius: 50%;
	background: #f5f5f7;
	overflow: hidden;
	margin-bottom: 8px;
}

.ncs-item-icon img {
	max-width: 65%;
	max-height: 65%;
	object-fit: contain;
	pointer-events: none;
}

.ncs-item-name {
	font-size: 13px;
	line-height: 1.3;
	max-width: 100%;
	word-wrap: break-word;
}