/**
 * Imports
 */

@import 'partials/mixins';

/**
* Vars
*/

$color-white: #FFF;
$color-black: #000;
$color-gray1: #E5E5E5;
$color-gray2: #565656;
$color-gray3: #757375;
$color-gray4: #D8D8D8;
$color-gray5: #676767;
$color-gray6: #9F9F9F;
$color-gray7: #BDBDBD;
$color-beige1: #F6F5F1;
$color-green1: #A0BC57;
$color-blue1: #6EB7C2;
$color-red1: #F34747;

$color-primary: #F6931D;

$trans-time: .15s;
$trans-func: ease;

/**
* Import fonts
*/
$font-primary-regular: 'Montserrat', sans-serif;
$font-primary-light: 'Montserrat-Light', sans-serif;
$font-primary-semi-bold: 'Montserrat-SemiBold', sans-serif;
$font-primary-bold: 'Montserrat-Bold', sans-serif;


/**
* Mixins
*/

@mixin font-primary-regular {
	font-family: $font-primary-regular;
	font-weight: normal;
}

@mixin font-primary-light {
	font-family: $font-primary-light;
	font-weight: normal;
}

@mixin font-primary-semi-bold {
	font-family: $font-primary-semi-bold;
	font-weight: normal;
}

@mixin font-primary-bold {
	font-family: $font-primary-bold;
	font-weight: normal;
}

@mixin btn-primary-style($color) {
	background: $color;

	&:hover,
	&:focus,
	&:active {
		background: darken($color, 10);
	}

	&:active {
		&:focus {
			background: darken($color, 10);
		}
	}
}

@mixin btn-secondary-style($color) {
	background: transparent;
	border: 2px solid $color-white;
	color: $color;
	padding-bottom: 11px;
	padding-top: 11px;

	&:hover,
	&:focus,
	&:active {
		background: transparent;
		border-color: $color;
	}

	&:active {
		&:focus {
			background: transparent;
			border-color: $color;
		}
	}

	@include breakpoint-phone {
		border-color: $color;

		&:hover,
		&:focus,
		&:active {
			background: $color;
			color: $color-white;
		}

		&:active {
			&:focus {
				background: $color;
				color: $color-white;
			}
		}
	}
}


/**
* Animation
*/

@keyframes spinnerAnim {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}


/**
* Desktop styles
*/

.apt-block {
	border-bottom: 1px solid $color-gray1;
	color: $color-gray2;
	margin: 0;
	padding: 45px 0;

	&__title {
		margin: 0 0 45px;
	}

	&__loading {
		@include font-primary-regular;
		color: $color-gray6;
		font-size: 13px;
		letter-spacing: .69px;
		line-height: 16px;
		margin: 40px 0 0;
		padding-left: 20px;
		position: relative;
		text-transform: uppercase;

		.apt-block__spinner {
			left: 0;
			position: absolute;
			top: 0;
		}
	}

	&__spinner {
		cursor: wait;
		display: inline-block;
		height: 10px;
		position: relative;
		width: 10px;

		&::before {
			content: '';
			display: inline-block;
			height: 100%;
			vertical-align: middle;
		}

		&::after {
			animation: spinnerAnim 1.5s linear infinite;
			border: 3px solid $color-gray6;
			border-radius: 50%;
			border-right-color: $color-gray1;
			border-top-color: $color-gray1;
			content: '';
			display: block;
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			vertical-align: middle;
			width: 100%;
		}
	}

	.has-error {
		.form-control-select {
			border-color: $color-red1;
			color: $color-red1;
		}

		.apt-match__schedule-error {
			display: block;
		}
	}

	.form-control-select {
		background: $color-white;
		border: 1px solid $color-gray4;
		border-radius: 4px;
		box-shadow: inset 0 1px 2px 0 rgba($color-black, .1);
		color: $color-gray2;
		display: inline-block;
		height: 44px;
		position: relative;
		transition: color $trans-func $trans-time, border-color $trans-func $trans-time;

		&::after {
			border-color: $color-gray4;
			border-style: solid;
			border-width: 0 2px 2px 0;
			content: '';
			display: block;
			height: 6px;
			position: absolute;
			right: 15px;
			top: 15px;
			transform: rotate(45deg);
			width: 6px;
			z-index: 1;
		}

		select {
			@include font-primary-light;
			appearance: none;
			background: transparent;
			border: 0;
			font-size: 14px;
			height: 44px;
			line-height: 18px;
			padding: 13px 30px 13px 20px;
			width: 100%;
			z-index: 2;

			&::-ms-expand { // sass-lint:disable-line no-vendor-prefixes
				display: none;
			}

			&:disabled {
				cursor: not-allowed;
			}
		}
	}

	a,
	button,
	input,
	select {
		outline: none !important;
	}

	button,
	select {
		cursor: pointer;
	}

	.btn {
		@include font-primary-regular;
		appearance: none;
		border: 0;
		border-radius: 4px;
		box-shadow: none;
		color: $color-white;
		display: inline-block;
		font-size: 14px;
		height: 44px;
		line-height: 18px;
		margin: 0;
		overflow: hidden;
		padding: 13px 20px;
		position: relative;

		& + .btn {
			margin-left: 15px;
		}

		span {
			color: inherit;
		}

		&-primary {
			@include btn-primary-style($color-primary);
		}

		&-link {
			@include btn-secondary-style($color-blue1);
		}

		.spinner {
			cursor: wait;
			display: none;
			height: 10px;
			left: 50%;
			margin: -7px 0 0 -7px;
			position: absolute;
			top: 50%;
			width: 10px;

			&::before {
				content: '';
				display: inline-block;
				height: 100%;
				vertical-align: middle;
			}

			&::after {
				animation: spinnerAnim 1.5s linear infinite;
				border: 3px solid darken($color-primary, 15);
				border-radius: 50%;
				border-right-color: $color-white;
				border-top-color: $color-white;
				content: '';
				display: block;
				height: 100%;
				left: 0;
				position: absolute;
				top: 0;
				vertical-align: middle;
				width: 100%;
			}
		}
	}

	&--instant {
		.apt-block {
			&__suptitle,
			&__title,
			&__subtitle {
				text-align: center;
			}

			&__title {
				font-size: 36px;
				line-height: 39px;
				margin-bottom: 15px;
			}

			&__subtitle {
				font-size: 16px;
				line-height: 19px;
				margin-bottom: 25px;
				margin-left: auto;
				margin-right: auto;
				max-width: 300px;
			}
		}
	}

	&__suptitle {
		@include font-primary-semi-bold;
		color: $color-gray1;
		font-size: 16px;
		line-height: 24px;
		margin: 0 0 5px;
		text-transform: uppercase;
	}

	&__instant-matches {
		margin-left: auto;
		margin-right: auto;
		max-width: 585px;
	}
}

.apt-match {
	@include font-primary-light;
	min-height: 120px;
	padding-left: 150px;
	position: relative;

	& + & {
		margin-top: 40px;
	}

	&--loading {
		&::after {
			bottom: 0;
			content: '';
			cursor: wait;
			display: block;
			left: 0;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 10;
		}

		.btn {
			span {
				visibility: hidden;
			}

			.spinner {
				display: inline-block;
				visibility: visible;
			}
		}
	}

	&__logo {
		background-position: center top;
		background-repeat: no-repeat;
		background-size: contain;
		border: 4px solid $color-white;
		box-shadow: 0 2px 4px 0 rgba($color-black, .13);
		height: 120px;
		left: 0;
		overflow: hidden;
		position: absolute;
		text-indent: -1000px;
		top: 0;
		width: 120px;

		&--placeholder {
			@include font-primary-light;
			background: $color-beige1;
			color: $color-gray7;
			font-size: 58px;
			letter-spacing: 0;
			line-height: 110px;
			text-align: center;
			text-indent: 0;
		}
	}

	&__label {
		@include font-primary-semi-bold;
		color: $color-green1;
		font-size: 13px;
		letter-spacing: .69px;
		line-height: 16px;
		text-transform: uppercase;
	}

	&__company {
		@include font-primary-regular;
		font-size: 18px;
		line-height: 20px;
		margin: 0 0 15px;
	}

	&__form {
		color: $color-gray3;
		font-size: 14px;
		line-height: 20px;
		max-width: 585px;

		&-title {
			margin-bottom: 5px;
		}
	}

	&__schedule-error {
		color: $color-red1;
		display: none;
		margin: 5px 0 0;
	}

	&__schedule-control {
		background: $color-white;
		border-collapse: separate;
		border-radius: 4px;
		display: table;
		font-size: 0;
		margin: 0;
		position: relative;
		width: 100%;

		&--date-only {
			width: 60%;

			.form-control-select {
				&:first-child {
					width: 100%;
				}

				&:last-child {
					display: none;
				}
			}
		}

		&-controls {
			display: table-cell;
			vertical-align: top;
			width: 99%;
		}

		&-btn {
			display: table-cell;
			vertical-align: top;
			width: 1%;
		}

		.btn,
		.form-control-select {
			border-radius: 0;
			box-sizing: border-box;
			vertical-align: top;
		}

		.form-control-select {
			background: transparent;
			border-right-width: 0;
			overflow: hidden;
			width: 50%;

			&:first-child {
				border-radius: 4px 0 0 4px;
			}
		}

		.btn {
			border-radius: 0 4px 4px 0;
		}
	}

	&__schedule-info {
		position: relative;
		width: 100%;

		&::after {
			clear: both;
			content: '';
			display: block;
		}

		&-row {
			&::after {
				clear: both;
				content: '';
				display: table;
				height: 1px;
				overflow: hidden;
			}
		}

		&-col {
			&-left {
				float: left;
			}

			&-right {
				float: right;
				text-align: right;
				width: 285px;
			}
		}

		&-date {
			@include font-primary-regular;
			font-size: 18px;
			line-height: 20px;
			padding: 4px 0 0;
		}
	}

	&__success-msg {
		text-align: left;

		&-title {
			@include font-primary-semi-bold;
			color: $color-green1;
			font-size: 13px;
			line-height: 16px;
			padding-left: 15px;
			position: relative;
			text-transform: uppercase;

			&::before {
				border-color: $color-green1;
				border-style: solid;
				border-width: 0 3px 3px 0;
				content: '';
				display: block;
				height: 8px;
				left: 0;
				position: absolute;
				top: 0;
				transform: rotate(45deg);
				width: 4px;
			}
		}

		&-text {
			padding-left: 15px;
		}
	}

	&__tcpa {
		@include font-primary-regular;
		clear: both;
		color: $color-gray5;
		font-size: 11px;
		line-height: 13px;
		margin: 20px 0 0;
		text-align: left;

		a {
			color: inherit;
		}
	}
}

.apt-instant-match {
	position: relative;

	& + & {
		margin-top: 15px;
	}

	.apt-block {
		&__spinner {
			margin-right: 12px;
		}
	}

	.apt-match {
		&__schedule-control {
			&--date-only {
				width: 100%;

				.form-control-select {
					&:first-child {
						border-radius: 4px 0 0;
						border-right-width: 0;
						width: 50%;
					}

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

						&::after {
							opacity: .25;
						}
					}

					select {
						&:disabled {
							opacity: .25;
						}
					}
				}
			}
		}
	}

	&--loading {
		.apt-instant-match__placeholder {
			display: none;

			&--loading {
				display: block;
			}
		}
	}

	&__scheduled,
	&__placeholder {
		@include font-primary-semi-bold;
		border-radius: 4px;
		font-size: 13px;
		line-height: 16px;
		padding: 12px 20px;
		text-align: center;
		text-transform: uppercase;
	}

	&__placeholder {
		border: 2px dashed $color-gray4;
		color: $color-gray6;

		&--loading {
			display: none;
		}
	}

	&__scheduled {
		background: $color-gray5;
		color: $color-white;
		display: none;
		padding-bottom: 14px;
		padding-top: 14px;
		transition: background-color $trans-time $trans-func;

		&-content {
			display: inline-block;
			padding-left: 20px;
			position: relative;

			.apt-block__spinner {
				left: 0;
				margin-top: -8px;
				position: absolute;
				top: 50%;
			}

			&::before {
				border-color: $color-white;
				border-style: solid;
				border-width: 0 3px 3px 0;
				content: '';
				display: none;
				height: 8px;
				left: 2px;
				position: absolute;
				top: 1px;
				transform: rotate(45deg);
				width: 5px;
			}
		}
	}

	&__form {
		&--loading,
		&--scheduled {
			.apt-instant-match {
				&__schedule {
					display: none;
				}

				&__scheduled {
					display: block;
				}
			}
		}

		&--loading {
			cursor: wait;
		}

		&--scheduled {
			.apt-instant-match {
				&__scheduled {
					background: #A0BC57;

					&-content {
						.apt-block__spinner {
							display: none;
						}

						&::before {
							display: block;
						}
					}
				}
			}
		}
	}
}


/**
* Mobile styles
*/

@include breakpoint-phone {
	.apt-block {
		padding: 20px 0;
		text-align: center;

		&--instant {
			.apt-block {
				&__title {
					font-size: 28px;
					line-height: 34px;
				}
			}
		}

		&__loading {
			display: inline-block;
		}
	}

	.apt-match {
		padding-left: 0;
		text-align: left;

		&__logo {
			height: 90px;
			margin: 0 auto 15px;
			position: static;
			width: 90px;

			&--placeholder {
				font-size: 38px;
				line-height: 84px;
			}
		}

		&__label,
		&__company {
			text-align: center;
		}

		&__form {
			margin: 0 auto;
			max-width: 400px;

			&-title {
				text-align: center;
			}
		}

		&__schedule-control {
			display: block;

			&-controls,
			&-btns {
				display: block;
				width: 100%;
			}

			&-controls {
				height: 44px;
			}

			.form-control-select {
				border-radius: 0;

				&:first-child {
					border-radius: 4px 0 0;
				}

				&:last-child {
					border-radius: 0 4px 0 0;
					border-right-width: 1px;
				}
			}

			&--date-only {
				width: 100%;

				.form-control-select {
					&:first-child {
						border-right-width: 1px;
						border-top-right-radius: 4px;
					}
				}
			}

			.btn {
				border-radius: 0 0 4px 4px;
				display: block;
				width: 100%;
			}
		}

		&__schedule-info {
			text-align: center;

			&-date,
			&-time {
				margin-right: 0;
			}

			&-col {
				&-left,
				&-right {
					float: none;
					margin-top: 15px;
					text-align: center;
					width: 100%;
				}
			}
		}

		&__success-msg {
			text-align: center;

			&-title {
				display: inline-block;
			}

			&-text {
				padding: 0;
			}
		}
	}
}