// -------------------------------------------------------------------
// :: SEARCH
// -------------------------------------------------------------------

.m-search{

	display: block;

	input {
		@extend %__input;
		border-radius: 100px;
		padding-left: rem(30px);
		transition: all 0.3s ease-in-out;

		&:focus {
			border-color: darken($border-color, 20%);
		}

		&:focus + span[class*="icon"] {
			border-left-color: darken($border-color, 20%) !important;
		}
	}

	.m-search__field-holder {
		position: relative;

		span[class*="icon"] {
			position: absolute;
			right: 0;
			width: rem(70px);
			top: 0;
			font-size: rem(20px);
			bottom: 0;
			display: block;
			border-left: 1px solid $border-color;
			transition: all 0.3s ease-in-out;

			&:before {
				position: relative;
				top: 5px;
				left: 20px;
			}
		}
	}

}

// collapsible version

.m-search--collapsible {

	display: inline-block;

	.m-search__field-holder {

		padding-right: 60px;

		span[class*="icon"] {
			border: 1px solid $border-color;
			border-radius: 100px;
			width: rem(47px);
			position: absolute;

			&:before {
				position: absolute;
				top: 13px;
				left: 13px;
			}

			&:hover {
				background: $medium;
			}
		}

		span.icon-search {
			display: none;
		}

	}

	input {
		padding-left: 1rem;

		border-left: none;
		border-right: none;
		border-radius: 0;
		border-top: none;
	}

	&.m-search--collapsed {

		.m-search__field-holder {
			padding-right: 50px;
		}

		input {
			width: 0;
			padding-left: 0;
			padding-right: 0;
		}

		span.icon-search {
			display: block;
		}

		span.icon-close {
			display: none;
		}
	}

}

// m-search
.m-search--big{
	background-color: $white;
	border: none;
	border-radius: 5px;

	input {
		border: none;
		font-size: rem(20px);
		padding: rem(20px) rem(25px);
		padding-left: rem(60px);

		&.is-visible {
			+ .m-search__results {
				visibility: visible;
				opacity: 1;

				.m-search__results__item {
					display: block;
				}

				+ .icon-close {
					@include FLOW-at($desktop) {
						display: block;
					}
				}
			}
		}
	}

	.m-search__field-holder {
		border-radius: 5px;
		border: 1px solid $border-color;

		span[class*="icon"] {
			border: none;
			font-size: 1.75em;
			color: $medium;
			left: 0;
			right: inherit;

			&:before {
				left: 20px;
				top: 12px;
			}
		}

		span.icon-close {
			color: $black;
			display: none;
			font-size: 0.8em;
			left: inherit;
			right: 0;
			top: 15px;
		}
	}
}

.m-search__results {
	background-color: $white;
	border: 1px solid $border-color;
	border-top: none;
	display: block;
	transition: opacity 600ms ease-in-out, visibility 600ms ease-in-out;
	position: absolute;
	opacity: 0;
	left: -1px;
	top: 59px;
	width: calc(100% + 2px);
	z-index: 500;

	&__item {
		transition: 0.3s background-color ease-in-out;
		display: none;

		&:first-child {
			margin-top: 15px;
		}

		&:hover {
			background-color: $light;
			cursor: pointer;
		}

		&__content {
			border-top: 1px solid $border-color;
			color: $black;
			display: flex;

			margin: 0 35px;
			padding: 25px 0;
			text-decoration: none;

			span {
				align-self: flex-start;
			}

			.m-search__results__item__description {
				display: block;
				width: 100%;
			}

			@include FLOW-to($desktop) {
				flex-wrap: wrap;
				margin: 0 25px;

				.m-search__results__item__description {
					display: none;
				}

				.m-search__results__item__content {
					flex-wrap: wrap;
				}

				span {
					margin-top: 10px;
				}
			}

		}
	}
}