// Pearson VUE Test Center Registration
// =====

.testcenter-register {
	@include clearfix;
	padding: 60px 0px 120px;

	// reset - horrible, but necessary
	p, a, h1, h2, h3, h4, h5, h6 {
		font-family: $sans-serif !important;
	}

	// basic layout
	.introduction {
		width: flex-grid(12);
	}

	.message-status-registration {
		width: flex-grid(12);
	}

	.content, aside {
		@include box-sizing(border-box);
	}

	.content {
		margin-right: flex-gutter();
		width: flex-grid(8);
		float: left;
	}

	aside {
		margin: 0;
		width: flex-grid(4);
		float: left;
	}

	// introduction
	.introduction {

		header {

			h2 {
				margin: 0;
				font-family: $sans-serif;
				font-size: 16px;
				color: $lighter-base-font-color;
			}

			h1 {
				font-family: $sans-serif;
				font-size: 34px;
				text-align: left;
			}
		}
	}

	// content
	.content {
		background: rgb(255,255,255);
	}

	// form
	.form-fields-primary, .form-fields-secondary {
		border-bottom: 1px solid rgba(0,0,0,0.25);
		box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.1);
	}

	form {
		border: 1px solid rgb(216, 223, 230);
		border-radius: 3px;
		box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.2);

		.instructions, .note {
			margin: 0;
			padding: ($baseline*1.5) ($baseline*1.5) 0 ($baseline*1.5);
			font-size: 14px;
			color: tint($base-font-color, 20%);

			strong {
				font-weight: normal;
			}

			.title, .indicator {
				color: $base-font-color;
				font-weight: 700;
			}
		}

		fieldset {
			border-bottom: 1px solid rgba(216, 223, 230, 0.50);
			padding: ($baseline*1.5);
		}

		.form-actions {
			@include clearfix();
			padding: ($baseline*1.5);

			button[type="submit"] {
				display: block;
				@include button(simple, $blue);
				@include box-sizing(border-box);
				border-radius: 3px;
				font: bold 15px/1.6rem $sans-serif;
				letter-spacing: 0;
				padding: ($baseline*0.75) $baseline;
				text-align: center;


				&:disabled {
					opacity: 0.3;
				}
			}

			.action-primary {
				float: left;
				width: flex-grid(5,8);
				margin-right: flex-gutter(2);
			}

			.action-secondary {
				display: block;
				float: left;
				width: flex-grid(2,8);
				margin-top: $baseline;
				padding: ($baseline/4);
				font-size: 13px;
				text-align: right;
				text-transform: uppercase;
			}

			&.error {

			}
		}

		.list-input {
			margin: 0;
			padding: 0;
			list-style: none;

			.field {
				border-bottom: 1px dotted rgba(216, 223, 230, 0.5);
				margin: 0 0 $baseline 0;
				padding: 0 0 $baseline 0;

				&:last-child {
					border: none;
					margin-bottom: 0;
					padding-bottom: 0;
				}

				&.disabled, &.submitted {
					color: rgba(0,0,0,.25);

					label {
						cursor: text;

						&:after {
							margin-left: ($baseline/4);
						}
					}

					textarea, input {
						background: rgb(255,255,255);
						color: rgba(0,0,0,.25);
					}
				}

				&.disabled {
					label:after {
						color: rgba(0,0,0,.35);
						content: "(Disabled Currently)";
					}
				}

				&.submitted {

					label:after {
						content: "(Previously Submitted and Not Editable)";
					}

					.value {
						border-radius: 3px;
						border: 1px solid #C8C8C8;
						padding: $baseline ($baseline*0.75);
						background: #FAFAFA;
					}
				}

				&.error {

					label {
						color: $red;
					}

					input, textarea {
						border-color: tint($red,50%);
					}
				}

				&.required {

					label {
						font-weight: bold;
					}

					label:after {
						margin-left: ($baseline/4);
						content: "*";
					}
				}

				label, input, textarea {
					display: block;
					font-family: $sans-serif;
					font-style: normal;
				}

				label {
					margin: 0 0 ($baseline/4) 0;
					@include transition(color 0.15s ease-in-out 0s);

					&.is-focused {
						color: $blue;
					}
				}

				input, textarea {
					height: 100%;
					width: 100%;
					padding: ($baseline/2);

					&.long {
						width: 100%;
					}

					&.short {
						width: 25%;
					}
				}

				textarea.long {
					height: ($baseline*5);
				}
			}

			.field-group {
				@include clearfix();
				border-bottom: 1px dotted rgba(216, 223, 230, 0.5);
				margin: 0 0 $baseline 0;
				padding: 0 0 $baseline 0;

				.field {
					display: block;
					float: left;
					border-bottom: none;
					margin: 0 $baseline ($baseline/2) 0;
					padding-bottom: 0;

					input, textarea {
						width: 100%;
					}
				}

				&.addresses {

					.field {
						width: 45%;
					}
				}

				&.postal-2 {
					border-bottom: none;
					margin-bottom: 0;
					padding-bottom: 0;

				}

				&.phoneinfo {

				}
			}
		}

		&.disabled {

			> .instructions {
				display: none;
			}

			.field {
				opacity: 0.6;

				.label, label {
					cursor: auto;
				}
			}

			.form-actions {
				display: none;
			}
		}
	}

	// form - specifics
	.form-fields-secondary {
		display: none;

		&.is-shown {
			display: block;
		}

		&.disabled {

			fieldset {
				opacity: 0.5;
			}
		}
	}

	.form-fields-secondary-visibility {
		display: block;
		margin: 0;
		padding: $baseline ($baseline*1.5) 0 ($baseline*1.5);
		font-size: 13px;

		&.is-hidden {
			display: none;
		}
	}


	// aside
	aside {
		padding-left: $baseline;

		.message-status {
			border-radius: 3px;
			margin: 0 0 ($baseline*2) 0;
			border: 1px solid #ccc;
			padding: 0;
			background: tint($yellow,90%);

			> * {
				padding: $baseline;
			}

			p {
				margin: 0 0 ($baseline/4) 0;
				padding: 0;
				font-size: 13px;
			}

			.label, .value {
				display: block;
			}

			h3, h4, h5 {
				font-family: $sans-serif;
			}

			h3 {
				border-bottom: 1px solid tint(rgb(0,0,0), 90%);
				padding-bottom: ($baseline*0.75);
			}

			h4 {
				margin-bottom: ($baseline/4);
			}

			.status-list {
				list-style: none;
				margin: 0;
				padding: $baseline;

				> .item {
					@include clearfix();
					margin: 0 0 ($baseline*0.75) 0;
					border-bottom: 1px solid tint(rgb(0,0,0), 95%);
					padding: 0 0 ($baseline/2) 0;

					&:last-child {
						margin-bottom: 0;
						border-bottom: none;
						padding-bottom: 0;
					}

					.title {
						margin-bottom: ($baseline/4);
						position: relative;
						font-weight: bold;
						font-size: 14px;

						&:after {
							position: absolute;
							top: 0;
							right: $baseline;
							margin-left: $baseline;
							content: "not started";
							text-transform: uppercase;
							font-size: 11px;
							font-weight: normal;
							opacity: 0.5;
						}
					}

					.details, .item, .instructions {
						@include transition(opacity 0.10s ease-in-out 0s);
						font-size: 13px;
						opacity: 0.65;
					}

					&:before {
						border-radius: $baseline;
						position: relative;
						top: 3px;
						display: block;
						float: left;
						width: ($baseline/2);
						height: ($baseline/2);
						margin: 0 ($baseline/2) 0 0;
						background: $dark-gray;
						content: "";
					}

					// specific states
					&.status-processed {

						&:before {
							background: green;
						}

						.title:after {
							color: green;
							content: "processed";
						}

						&.status-registration {
							.exam-link {
								font-weight: 600 !important;
							}
						}
					}

					&.status-pending {

						&:before {
							background: transparent;
							border: 1px dotted gray;
						}

						.title:after {
							color: gray;
							content: "pending";
						}
					}

					&.status-rejected {

						&:before {
							background: $red;
						}

						.title:after {
							color: red;
							content: "rejected";
						}

						.call-link {
							font-weight: bold;
						}
					}

					&.status-initial {

						&:before {
							background: transparent;
							border: 1px dotted gray;
						}

						.title:after {
							color: gray;
						}
					}

					&:hover {

						.details, .item, .instructions {
							opacity: 1.0;
						}
					}
				}

				// sub menus
				.accommodations-list, .error-list {
					list-style: none;
					margin: ($baseline/2) 0;
					padding: 0;
					font-size: 13px;

					.item {
						margin: 0 0 ($baseline/4) 0;
						padding: 0;
					}
				}
			}

			// actions
			.contact-link {
				font-weight: 600;
			}

			.actions {
				box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.2);
				border-top: 1px solid tint(rgb(0,0,0), 90%);
				padding-top: ($baseline*0.75);
				background: tint($yellow,70%);
				font-size: 14px;

				.title {
					font-size: 14px;
				}

				.label, .value {
					display: inline-block;
				}

				.label {
					margin-right: ($baseline/4);
				}

				.value {
					font-weight: bold;
				}

				.message-copy {
					font-size: 13px;
				}

				.exam-button {
				  @include button(simple, $pink);
				  display: block;
				  margin: ($baseline/2) 0 0 0;
				  padding: ($baseline/2) $baseline;
				  font-size: 13px;
				  font-weight: bold;

				  &:hover {
				    text-decoration: none;
				  }
				}
			}

			.registration-number {

				.label {
					text-transform: none;
					letter-spacing: 0;
				}


			}

			.registration-processed {

				.message-copy {
					margin: 0 0 ($baseline/2) 0;
				}
			}
		}

		> .details {
			border-bottom: 1px solid rgba(216, 223, 230, 0.5);
			margin: 0 0 $baseline 0;
			padding: 0 $baseline $baseline $baseline;
			font-family: $sans-serif;
			font-size: 14px;

			&:last-child {
				border: none;
				margin-bottom: 0;
				padding-bottom: 0;
			}

			h4 {
				margin: 0 0 ($baseline/2) 0;
				font-family: $sans-serif;
				font-size: 14px;
				text-transform: uppercase;
				letter-spacing: 0.5px;
				color: #ccc;
			}

			.label, .value {
				display: inline-block;
			}

			.label {
				color: rgba(0,0,0,.65);
				margin-right: ($baseline/2);
			}

			.value {
				color: rgb(0,0,0);
				font-weight: 600;
			}
		}

		.details-course {

		}

		.details-registration {

			ul {
				margin: 0;
				padding: 0;
				list-style: none;

				li {
					margin: 0 0 ($baseline/4) 0;
				}
			}
		}
	}

	// status messages
	.message {
		border-radius: 3px;
		display: none;
		margin: $baseline 0;
		padding: ($baseline/2) $baseline;

		&.is-shown {
			display: block;
		}

		.message-copy {
			font-size: 14px;
		}

		// registration status
		&.message-flash {
			border-radius: 3px;
			position: relative;
			margin: 0 0 ($baseline*2) 0;
			border: 1px solid #ccc;
			padding-top: ($baseline*0.75);
			background: tint($yellow,70%);
			font-size: 14px;

			.message-title, .message-copy {
			}

			.message-title {
				font-weight: bold;
				font-size: 16px;
				margin: 0 0 ($baseline/4) 0;
			}

			.message-copy {
				font-size: 14px;
			}

			.contact-button {
				@include button(simple, $blue);
			}

			.exam-button {
			  @include button(simple, $pink);
			}

			.button {
				position: absolute;
				top: ($baseline/4);
				right: $baseline;
				margin: ($baseline/2) 0 0 0;
				padding: ($baseline/2) $baseline;
				font-size: 13px;
				font-weight: bold;
				letter-spacing: 0;

				&:hover {
				  text-decoration: none;
				}
			}

			&.message-action {

				.message-title, .message-copy {
					width: 65%;
				}
			}
		}

		// submission error
		&.submission-error {
			@include box-sizing(border-box);
			float: left;
			width: flex-grid(8,8);
			border: 1px solid tint($red,85%);
			background: tint($red,95%);
			font-size: 14px;

			#submission-error-heading {
				margin-bottom: ($baseline/2);
				border-bottom: 1px solid tint($red, 85%);
				padding-bottom: ($baseline/2);
				font-weight: bold;
			}

			.field-name, .field-error {
				display: inline-block;
			}

			.field-name {
				margin-right: ($baseline/4);
			}

			.field-error {
				color: tint($red, 55%);
			}

			p {
				color: $red;
			}

			ul {
				margin: 0 0 ($baseline/2) 0;
				padding: 0;
				list-style: none;

				li {
					margin-bottom: ($baseline/2);
					padding: 0;

					span {
						color: $red;
					}

					a {
						color: $red;
						text-decoration: none;

						&:hover, &:active {
							text-decoration: underline;
						}
					}
				}
			}
		}

		// submission success
		&.submission-saved {
			border: 1px solid tint($blue,85%);
			background: tint($blue,95%);

			.message-copy {
				color: $blue;
			}
		}

		// specific - registration closed
		&.registration-closed {
			@include border-bottom-radius(0);
			margin-top: 0;
			border-bottom: 1px solid $light-gray;
			padding: $baseline;
			background: tint($light-gray,50%);

			.message-title {
				font-weight: bold;
			}

			.message-copy {

			}
		}
	}

	.is-shown {
		display: block;
	}

	// hidden
	.is-hidden {
		display: none;
	}
}
