/* Tabs */

.wpj-tabs-menu,
.wpj-tabs-menu.ui.secondary.menu {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: -7px;

	.item {
		@include round(15px);

		display: inline-flex;
		align-items: center;
		padding: 9px 20px;
		background: $grayBackground4;
		flex-wrap: wrap;
		margin: 0;
		margin-bottom: 5px;
		font-size: 13px;
		font-weight: 600;
		color: $mainTextColor;
		line-height: 100%;
		cursor: pointer;
		transition: color 0.2s ease-out, background-color 0.2s ease-out;
		margin-bottom: 7px;

		&:not(:last-child) {
			margin-right: 7px;
		}

		&:hover {
			color: $headlinesColor3;
		}

		&.active {
			background: $mainColorBackground;
			color: $mainColorText;

			.item-count {
				background: $mainColor;
				color: $whiteColor;
			}
		}
	}
}

.item-count {
	@include round(8px);

	display: inline-flex;
	height: 15px;
	align-items: center;
	padding: 0 6px;
	margin-left: 6px;
	background: $whiteColor;
	color: $mainTextColor;
	font-size: 10px;
	font-weight: 600;
}