@import "variables";
.w-searchByNumber {
	.w-searchByNumber__head {
		margin-bottom: 16px;
		font-size: 24px;
		line-height: 1.25rem;
		font-weight: bold;
		color: $blue;
	}
	.w-searchByNumber__body {
		.form-group {
			display: flex;
			flex-wrap: wrap;
		}
		.w-searchByNumber__field {
			position: relative;
			img {
				position: absolute; top: 0; left: 0;
				display: block;
				height: 100%;
				@include border-radius(3px 0 0 3px);
			}
			.form-control {
				border-color: $blue;
				width: 200px;
				height: 48px;
				margin: 0;
				padding: 4px 8px 4px 44px;
				font-size: 32px;
				line-height: normal;
				text-align: center;
				text-transform: uppercase;
				@include border-radius(3px);
			}
		}
		.w-searchByNumber__button {
			flex-grow: 1;
			margin-left: 8px;
			.btn {
				position: relative;
				display: block;
				padding: 8px 16px 8px 56px;
				font-size: 24px;
				line-height: 32px;
				text-align: center;
				outline: none !important;
				@include border-radius(3px);
				.icon {
					position: absolute; top: 50%; left: 16px;
					display: block;
					width: 24px;
					height: 24px;
					margin-top: -12px;
				}
			}
		}
		@media(max-width: 767px){
			flex-direction: column;
			.w-searchByNumber__button {
				margin-top: 8px;
				margin-left: 0;
			}
		}
	}
	.w-searchByNumber__result {
		background: #DDE4EC;
		position: relative;
		margin-top: 8px;
		padding: 16px;
		@include border-radius(3px);
		.w-searchByNumber__resultList {
			margin: 0;
			padding: 0;
			list-style: none;
			& > li {
				position: relative;
				&:not(:first-child){
					margin-top: 8px;
				}
				&.link {
					margin-left: -16px;
					margin-right: -16px;
					padding: 12px 16px;
					& + .link {
						margin-top: 0;
					}
					&:hover {
						background: #ced6e2;
					}
				}
			}
		}
		&.has-error {
			background: none;
			padding: 0;
			color: $color_red;
		}
	}

	&.in {
		.w-searchByNumber__body {
			.w-searchByNumber__button {
				.btn {
					position: relative;
					overflow: hidden;
					display: block;
					height: 48px !important;
					width: 48px !important;
					padding: 0 !important;
					@include border-radius(50%);
					&:before {
						content: '';
						border: 2px solid $color_white;
						border-top-color: transparent;
						position: absolute; top: 0; bottom: 0; left: 0; right: 0;
						display: block;
						@include border-radius(50%);

						animation: btnRotate 1.5s linear infinite;
						-webkit-animation: btnRotate 1.5s linear infinite;

						@keyframes btnRotate {
							0% { @include transform(rotate(0deg)); }
							100% { @include transform(rotate(360deg)); }
						}
						@-webkit-keyframes btnRotate {
							0% { @include transform(rotate(0deg)); }
							100% { @include transform(rotate(360deg)); }
						}
					}
					.icon {
						position: absolute; top: 50% !important; left: 50% !important; z-index: 5;
						display: block;
						width: 24px !important;
						height: 24px !important;
						margin: -12px 0 0 -12px !important;
					}
					span {
						display: none;
					}
				}
			}
		}
	}
}