@import 'vars'
@import 'normalize'
+font-face('proxima', base64Font('proximanova-regular.woff'), $type:'woff', $weight: 400)
+font-face('proxima', base64Font('proximanova-semibold.woff'), $type:'woff', $weight: 500)
+font-face('proxima', base64Font('proximanova-bold.woff'), $type:'woff', $weight: 600)
+font-face('proxima', base64Font('proximanova-extrabold.woff'), $type:'woff', $weight: 700)
+font-face('montserrat', base64Font('montserrat-regular.woff'), $type:'woff', $weight: 400)
+font-face('montserrat', base64Font('montserrat-bold.woff'), $type:'woff', $weight: 600)

html
	background-color: #f1f1f1
	font-family: proxima

.testSuite
	padding: 20px
	box-sizing: border-box
	
	&_heading
		position: relative
		padding: 33px 20px 30px
		background-color: white
		border-bottom: 3px solid $primary
		font-weight: 500
		
		$titleSize: 40px
		&-title
			font-size: $titleSize
			line-height: 1
			color: $primary
			span
				color: $grey-light

		&-subtitle
			margin-top: 6px
			font-size: $titleSize/1.618
			line-height: 1.4
			color: $grey-light
			&:empty
				display: none


		&-backButton
			position: absolute
			+valign
			right: 30px
			display: block
			+size(180, 46)
			background-color: $primary

			&-text
				position: absolute
				+valign(55%)
				width: 100%
				font-size: 15px
				line-height: 1
				letter-spacing: letter-spacing(100)
				text-transform: uppercase
				text-align: center
				color: white









	&_index
		margin-top: 40px
		padding: 0 20px

		&-item
			margin-bottom: 25px
			background-color: white
			border-radius: 3px
			box-shadow: 0px 0px 5px rgba(0,0,0,0.07)
			font-size: 14px
			text-align: left

			&-innerwrap
				position: relative
				display: block
				+inheritSize
				padding: 20px
				box-sizing: border-box
				+clearfix

			&-title
				position: absolute
				+valign(54%)
				font-weight: 600
				font-size: 28px
				line-height: 1
				letter-spacing: letter-spacing(20)

				&-name
					color: $green

				&-version
					// text-transform: uppercase
					color: $grey-light


			&-subtitle
				margin-top: 3px
				font-weight: 500
				font-size: 15px
				text-align: center
				box-sizing: border-box
				opacity: 0.4


			&-button
				position: relative
				float: right
				display: block
				margin-left: 15px
				padding: 18px 20px 13px
				background-color: $grey-lighter
				cursor: pointer
				box-sizing: border-box
				+user-select(none)
				transition: background-color 0.2s
				&:hover
					background-color: $green

				&-text
					width: 100%
					font-weight: 500
					font-size: 15px
					line-height: 1
					letter-spacing: letter-spacing(100)
					text-transform: uppercase
					text-align: center
					color: white





	&_divider
		position: relative
		height: 2px
		margin: 60px 0
		box-sizing: border-box

		&-line
			position: relative
			z-index: 1
			+inheritSize
			background-color: lighten($divider,4)

		&-text
			position: absolute
			z-index: 2
			+valign(76%)
			left: 0
			right: 0
			+center
			width: 100px
			background-color: #f1f1f1
			font-weight: 500
			font-size: 15px
			line-height: 1
			letter-spacing: letter-spacing(100)
			text-transform: uppercase
			text-align: center
			color: darken($divider-dark,2)




	&_charts
		padding: 0 20px
		margin-top: 30px
		text-align: justify
		text-justify: distribute-all-lines
		font-size: 0
		&:after
			content: ''
			display: inline-block
			width: 100%

		&-gap
			display: inline-block
			width: 49%

		&-item
			position: relative
			display: inline-block
			vertical-align: top
			width: 49%
			margin-bottom: 25px
			background-color: white
			border-radius: 3px
			box-shadow: 0px 0px 5px rgba(0,0,0,0.07)
			font-size: 14px
			text-align: left
			&.isFullWidth
				width: 100%

			&.nonSharedTest:after
				content: '\2605'
				position: absolute
				top: 0
				right: 0
				border-radius: 0px 3px 0 0
				+size(18)
				background-color: $error
				line-height: 21px
				text-align: center
				color: white

			&-innerwrap
				position: relative
				display: block
				+inheritSize
				padding: 20px
				box-sizing: border-box

			&-title
				font-weight: 600
				font-size: 23px
				line-height: 1
				letter-spacing: letter-spacing(20)
				text-align: center
				text-transform: uppercase
				color: $green
				// color: $contrast-vibrant

			&-subtitle
				margin-top: 3px
				font-weight: 500
				font-size: 15px
				text-align: center
				box-sizing: border-box
				opacity: 0.4

			
			&-chart
				margin-top: 20px










	&-list
		margin-top: 30px
		text-align: justify
		text-justify: distribute-all-lines
		font-size: 0
		&:after
			content: ''
			display: inline-block
			width: 100%


		&-gap
			display: inline-block
			width: 32%

		&-item
			position: relative
			display: inline-block
			vertical-align: top
			width: 32%
			margin-bottom: 25px
			background-color: white
			border-radius: 3px
			box-shadow: 0px 0px 5px rgba(0,0,0,0.07)
			font-size: 14px
			text-align: left

			&.nonSharedTest:after
				content: '\2605'
				position: absolute
				top: 0
				right: 0
				border-radius: 0px 3px 0 0
				+size(18)
				background-color: $error
				line-height: 21px
				text-align: center
				color: white

			&-innerwrap
				position: relative
				display: block
				+inheritSize
				padding: 20px
				box-sizing: border-box

			&-title
				font-weight: 600
				font-size: 23px
				line-height: 1
				letter-spacing: letter-spacing(20)
				text-align: center
				text-transform: uppercase
				color: $green
				// color: $contrast-vibrant

			&-subtitle
				margin-top: 3px
				font-weight: 500
				font-size: 15px
				text-align: center
				box-sizing: border-box
				opacity: 0.4


			&-button
				position: relative
				width: 100%
				height: 46px
				margin-top: 25px
				// background-color: $green
				background-color: $grey-lighter
				cursor: pointer
				+user-select(none)
				transition: background-color 0.2s
				&:hover
					// background-color: darken($green, 8)
					background-color: $green

				&-text
					position: absolute
					+valign(55%)
					width: 100%
					font-weight: 500
					font-size: 15px
					line-height: 1
					letter-spacing: letter-spacing(100)
					text-transform: uppercase
					text-align: center
					color: white


			
			&-results
				margin-top: 20px
				display: none
				&.hasResults
					display: block
				
				&-item
					margin-top: 5px
					+clearfix
					font-size: 15px

					&-label
						float: left
						font-weight: 600
						letter-spacing: letter-spacing(60)
						text-transform: uppercase

					&-value
						float: right
						letter-spacing: letter-spacing(20)


			
			&-setup
				margin-top: 20px
				border: 1px solid $divider
				padding: 10px
				box-sizing: border-box
				display: none

				&:empty
					display: none


























	&_settingsBar
		position: fixed
		z-index: 100
		bottom: 0
		left: 0
		width: 100%
		background-color: white
		box-shadow: 0px 0px 5px rgba(0,0,0,0.2)
		+user-select(none)

		&-innerwrap
			+inheritSize
			padding: 40px 20px
			box-sizing: border-box
			+clearfix


		&-title
			float: left
			font-size: 28px
			font-weight: 600
			line-height: 1
			color: $primary
			// text-transform: uppercase
			// letter-spacing: letter-spacing(60)


		&-list
			float: right
			font-family: montserrat

			&-item
				float: left
				// height: 27px
				margin-right: 22px
				padding-right: 22px
				border-right: 1px solid $divider
				&:last-child
					border-right: 0

				&-label
					position: relative
					top: 8px
					float: left
					margin-right: 10px
					font-size: 13px
					font-weight: 500
					letter-spacing: letter-spacing(20)
					text-transform: uppercase
					color: $grey-light
				

				&-options
					float: left
					height: 100%

					&-item
						float: left
						height: 100%
						padding: 0 7px
						background-color: lighten($grey,50)
						border: 1px solid $divider
						border-right: 0
						// border-radius: 3px
						font-size: 10.1px
						line-height: 28px
						cursor: pointer
						&:last-child
							border-right: 1px solid $divider

						&:hover
							background-color: lighten($grey,40)
						
						&.active
							background-color: $primary
							color: white