.cost-comparison {
	background: #fff;
	box-shadow: $shadow;
	padding: 0.5em 0 0 0;
	clear: both;

	color: $alex-black;
	position: relative;
	margin-bottom: 0.5em;

	.highlights {
		height: 0;
		> div{
			display: none;

			&:last-child{
				display: inline-block;
			}
		}
	}

	.highlight {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;

		&.plan-highlight {
			width: 100%;
			opacity: 0.2;
			background: $alex-light-blue;
		}

		&.star {
			background: url(../img/star.svg) no-repeat;
			background-size: 2.25em;
			height: 2.25em;
			width: 2.25em;
			position: absolute;
			top: 9px;
			left: -20px;

			@include small-screen {
				background-size: 3em;
				height: 3em;
				width: 3em;
				left: -33px;
			}
		}
	}

	.title,
	.cost-bar {
		padding-left: 1em;
		padding-right: 1em;
	}

	.title {
		font-weight: 300;
		margin-bottom: 0;
		padding-right: 2em;
		font-size: 1.25em;
	}

	.cost-bar {
		width: 100%;
		display: inline-block;


		.bar {
			height: 20px;
			width: calc(100% - 4px);
			float: left;
			margin-bottom: 1.5em;
			padding-bottom: 3em;

			.bar-section {
				position: relative;

				&.bar3 {
					@include cost-bar($bar3);
				}

				&.bar4 {
					@include cost-bar($bar4);
				}

				&.bar5,
				&:last-child {
					@include cost-bar($bar-last);
				}

				&.bar1 {
					@include cost-bar($bar1);
				}

				&.bar2 {
					@include cost-bar($bar2);
				}

				.section-value {
					font-size: 0.75em;
					position: absolute;
					top: 105%;
					right: 1px;
				}
			}

			&:empty {
				display: none;
			}
		}
		.cost {
			text-align: right;
			font-weight: 700;
			font-size: 1.25em;
			border-right: 2px solid #333;
			width: 2px;
			height: 50px;
			display: inline-block;
			position: relative;
			float: right;
			display: none;

			&:empty {
				display: none;
			}
			.cost-value {
				position: absolute;
				text-align: right;
				width: 300px;
				bottom: -4px;
				right: 8px
			}

			@include small-screen {
				height: 60px;
			}
		}
	}

	.bar > div:last-child .cost {
		display: inline-block;
	}

	.plan-feature {
		font-size: 1em;
		background: $alex-light-blue;
		color: $alex-text;
		font-weight: 500;
		width: 100%;
		padding: 0.25em 1em;

		&.warning {
			color: $alex-red;
			text-transform: uppercase;
		}

		&:empty {
			display: none;
		}
	}
}

.comparison-description {
	font-weight: 500;
	font-size: 1.5em;
	color: $alex-black;

	.header {
		margin-bottom: 0.5em;
	}
}

.comparison-key {
	margin-bottom: $outer-margin;

	.comparison-key-item {
		width: 10em;
		margin-right: 1em;
		font-size: 0.8em;
		line-height: 1.1em;
		float: left;
		height: 50px;

		.block {
			height: 20px;
			width: 20px;
			float: left;
			margin-right: 0.5em;
			margin-top: -0.5em;

			@include small-screen {
				margin-right: 1em;
				margin-bottom: 1em;
				margin-top: -0.25em;
			}
		}

		// todo: see if there's a better way to do this shit. there probably is.
		&:nth-child(3) {

			.block {
				background: $bar3;
			}
		}

		&:nth-child(4) {

			.block {
				background: $bar4;
			}
		}

		&:nth-child(5),
		&:last-child {

			.block {
				background: $bar-last;
			}
		}

		&:first-child {

			.block {
				background: $bar1;
			}
		}

		&:nth-child(2) {

			.block {
				background: $bar2;
			}
		}




	}
}