$color-table-border: #d2d2d2;
$color-th-border: #ccc;
$color-table-zebra: #f2f2f2;

.data-table {
	counter-reset: table-row;
	padding: 40px 30px;
	
	table {
		border: 1px solid $color-table-border;
		min-width: 100%;
		position: relative;
		text-align: left;
	}
	
	tbody tr {
		counter-increment: table-row;
	}
	
	th,
	td {
		padding: 8px 18px;
	}
	
	th {
		color: $color-gray-dark;
		font-size: 13px;
		font-weight: normal;
		vertical-align: middle;
		min-width: 100px;
	}
	
	td {
		border-top: 1px solid $color-table-border;
		vertical-align: middle;
		
		&:first-child {
			min-width: 400px;
			padding-left: 48px;

			&:before {
				color: $color-black;
				content: counter(table-row)'.';
				display: inline-block;
				font-weight: normal;
				text-indent: -28px;
			}
		}
	}
}

.data-table--zebra {
	table {
		&:before { //30px padding after long(width) table
			background: transparent;
			content: '';
			height: 1px;
			left: 100%;
			position: absolute;
			width: 30px;
			top: 1px;
		}
	}

	th {
		border-bottom: 1px solid $color-th-border;
		cursor: pointer;
	}

	td {
		border-top: 0;
	}
	tr:nth-child(odd) td {
		background: $color-table-zebra;
	}
}

.data-table--chart {
	th,
	td {
		width: 100%;

		&:first-child {
			width: 400px;
		}

		&:last-child {
			width: 100px;
		}
	}

	table {
		border-top: 0;
	}

	tr {
		&:first-child {
			.benchmark-line {
				&:before {
					border-bottom: 3px solid $color-gray-dark;
					bottom: 100%;
					content: attr(data-score);
					font-size: 16px;
					font-weight: 700;
					left: 0;
					margin-bottom: -1px;
					margin-left: -10px;
					position: absolute;
					text-align: center;
					width: 21px;
				}
			}
		}
	}

	.data-table-td--benchmark {
		position: relative;

		.benchmark-line {
			background: $color-gray-dark;
			bottom: -1px;
			margin-left: 17px;
			position: absolute;
			top: -1px;
			width: 1px;
			z-index: 0;
		}
	}
}

.data-table-bar {
	font-size: 13px;
	height: 26px;
	line-height: 26px;
	padding: 0 10px;
	position: relative;
	z-index: 1;
	
	button {
		background-color: transparent;
		border: 0;
		margin: 0;
		padding: 0;
		font-size: 18px;
		position: absolute;
		top: 4px;
		right: 10px;
		transition: opacity .3s;
		
		&:hover {
			opacity: .6;
		}
	}
	
	&:first-child {
		background: $color-neutral;
		color: $color-gray;
	}
	
	&:last-child {
		background: $color-black;
		color: $color-white;
		margin-bottom: 1px;
	}

	&.passed {
		background: $color-green;
	}

	&.failed {
		background: $color-red;
	}
}
