.entity-list-chart-item {
	.transition(opacity, 100ms, linear);
	.box-sizing();
	.clearfix;
	width: 100%;
	color: @black;
	position: relative;
	background-color: @white;
	display: flex;
	flex-direction: column;
	padding: 16px;

	@media @bp_1024 {
		flex-direction: row;
		padding-left: 0;
		padding-right: 0;
		justify-content: space-between;
	}

	&.beatport {
		padding: 13px 12px;

		.entity {

			figure {
				width: 55px;
				height: 55px;
			}

			article {
				display: flex;
				justify-content: center;
			}

			h3 {
				.font-size(15);
				.clamp-lines(1);
			}

			.stats {
				flex: unset;
			}
		}

		.col-rank {

			strong {
				.font-size(15);
				font-weight: 400;
			}
		}

		.col-rank-section {
			padding: 8px;
			position: relative;
			border-width: 1px;

			@media @bp_768 {
				width: 25%;
				min-width: 25%;
				max-width: 25%;
			}

			@media @bp_1024 {
				width: 100px;
				min-width: 100px;
				max-width: 100px;
			}

			@media @bp_1200 {
				width: 120px;
				min-width: 120px;
				max-width: 120px;
			}

			&.active {
				background-color: #F9FCFF;

				&:before {

					@media @bp_1024 {
						.prevent-click;
						content: "";
						position: absolute;
						top: -8px;
						left: -1px;
						right: 0;
						bottom: -16px;
						background-color: #F9FCFF;
						z-index: 0;
						border-left: 1px solid @black;
					}
				}
			}

			.rank {
				.font-size(12);
				font-style: 16px;
				color: @grey-1;

				&.active {
					background-color: #F9FCFF;

					&:before {
						left: -8px;
					    border-top: 4px solid transparent;
						border-bottom: 4px solid transparent;
						border-left: 4px solid #000;
					}

					strong {
						.font-size(15);
						font-weight: 400;
					}
				}

				strong {
					font-weight: 500;
					color: @black;
					height: auto;
				}

				span {
					.font-size(10);
					display: block;
				}
			}
		}

		.primary-stats {

			.rank {

				strong {
					color: @grey-1;
				}

				&.country {

					strong {
						color: @black;
					}
				}
			}
		}

		.column-primary {

			@media @bp_768 {
				align-items: center;
			}

			.col-rank {
				align-self: flex-start;
				padding-top: 4px;
			}
		}

		.column-secondary {

			.col-rank-section {
				flex: 1;
			}
		}
	}

	&.beatport-track {
		padding: 10px 12px;
	}

	&.active {
		background-color: @indigo-1;
		//color: @white;

		/*
		.col-rank-section {
			border-color: #333;

			&.active {
				border-color: @white;
			}

			.rank {

				&.active {

					&:before {
						border-left: 6px solid @white;
					}

					span {
						color: @grey-1;
					}
				}
			}
		}

		.rank {

			strong {
				color: @grey;
			}
			
			&.active {
				border-color: @white;

				&:before {
					border-left: 6px solid @white;
				}

				strong,
				span {
					color: @white;
				}
			}
		}*/
	}

	.column-primary {
		display: flex;
		flex-direction: column;

		@media @bp_768 {
			flex-direction: row;
			flex: 1;
		}

		@media @bp_1024 {

		}
	}

	.column-secondary {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		@media @bp_1024 {
			flex-wrap: nowrap;
		}
	}

	.col {
		.box-sizing();
		display: flex;
		flex-direction: column;
	}

	.col-rank {
		flex-direction: row;

		@media @bp_768 {
			width: 120px;
			min-width: 120px;
			max-width: 120px;
			padding: 0 10px;
			flex-direction: column;
		}

		@media @bp_1024 {
			width: 100px;
			min-width: 100px;
			max-width: 100px;
		}

		@media @bp_1100 {
			width: 120px;
			min-width: 120px;
			max-width: 120px;
		}

		strong {
			.font-size(20);
			line-height: 29px;
			font-weight: 500;
		}

		.change {
			.font-size(10);
			display: block;
			color: @grey-1;
			white-space: nowrap;
			margin-left: 20px;

			@media @bp_768 {
				margin-left: 0;
			}

			&.down {

				&:before {
					border-left: 4px solid transparent;
					border-right: 4px solid transparent;
					border-top: 6px solid @red;
				}
			}

			&.up {

				&:before {
					border-left: 4px solid transparent;
					border-right: 4px solid transparent;
					border-bottom: 6px solid @green;
				}
			}

			&:before {
				content: "";
				width: 0;
				height: 0;
				display: inline-block;
				vertical-align: middle;
				margin-right: 4px;
			}
		}
	}

	.col-entity {
		flex-grow: 1;
	}

	.col-rank-section {
		border-left: 1px solid @white-2;
		padding: 36px 8px 0 8px;
		justify-content: space-between;
		background-repeat: no-repeat;
		background-position: left 8px top;
		width: 50%;
		min-width: 50%;
		margin-top: 16px;
		background-size: 16px;

		@media @bp_360 {
			width: 33.33%;
			min-width: 33.33%;
		}

		@media @bp_768 {
			width: auto;
			min-width: 0;
			flex: 1;
		}

		@media @bp_1024 {
			margin-top: 0;
			width: 80px;
			min-width: 80px;
		}

		@media @bp_1200 {
		}

		@media @bp_1280 {
			padding-right: 10px;
			padding-left: 15px;
			width: 90px;
			min-width: 90px;
			background-position: left 15px top;
		}

		@media @bp_1400 {
			width: 100px;
			min-width: 100px;
		}

		&.active {
			border-color: @black;
		}

		&.viberate {
			background-image: url('../images/svg/viberate-color.svg');
		}

		&.instagram {
			background-image: url('../images/svg/instagram-color.svg');
		}

		&.twitter {
			background-image: url('../images/svg/twitter-color.svg');
		}

		&.youtube {
			background-image: url('../images/svg/youtube-color.svg');
		}

		&.shazam {
			background-image: url('../images/svg/shazam-color.svg');
		}

		&.soundcloud {
			background-image: url('../images/svg/soundcloud-color.svg');
		}

		&.spotify {
			background-image: url('../images/svg/spotify-color.svg');
		}

		&.deezer {
			background-image: url('../images/svg/deezer-color.svg');
		}

		.rank {
			position: relative;

			&.active {

				strong {
					.font-size(14);
				}

				span {
					color: @black;
				}

				&:before {
					content: "";
					position: absolute;
					left: -8px;
					top: 0;
					margin-top: 1px;
					width: 0;
					height: 0;
					border-top: 6px solid transparent;
					border-bottom: 6px solid transparent;
					border-left: 6px solid @black;

					@media @bp_1280 {
						left: -15px;
					}
				}
			}

			strong,
			span {
				display: block;
			}
		}
	}

	.rank {
		.font-size(10);
		line-height: 15px;
		color: @grey-1;

		.strong,
		span {
			vertical-align: middle;
			display: inline-block;
		}

		img {
			vertical-align: top;
			margin-right: 3px;
		}
		
		strong {
			height: 14px;
			font-weight: 500;
			color: @black;
		}
	}

	.entity {
		display: flex;
		flex-direction: row;
		margin-top: 10px;

		@media @bp_768 {
			margin-top: 0;
		}

		figure {
			width: 120px;
			height: 120px;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}

		article {
			display: flex;
			flex-direction: column;
			padding-left: 16px;
			padding-right: 16px;
		}

		a {
			color: inherit;
		}

		h3 {
			.font-size(14);
			.clamp-lines(1);
			line-height: 18px;
			font-weight: 500;
		}

		.rank {
			.clamp-lines(1);
			text-transform: uppercase;
		}

		.stats {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			margin-top: 4px;
		}
	}
}