.search-all {
	width: 100%;
	text-align: center;

	padding: 20px 0;

	@media (max-width: $md) {
		.search-all-form, .search-all-results {
			transition: width .2s cubic-bezier(0.7,0,0.3,1),
						max-width .2s cubic-bezier(0.7,0,0.3,1),
		}
	}
}

.search-container {
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.search-all-form {
	position: relative;
	display: inline-block;
	width: 80%;
	height: 60px;
	max-width: 1100px;
	margin-top: 15px;
	padding-top: 0;
	background-color: white;
	z-index: 150;

	@media (min-width: $md) {
		margin-top: 30px;
        margin-bottom: 30px;
	}

	.search-fieldset {
		position: relative;
		display: inline-block;
		width: 100%;
		height: 100%;
		border-left: 1px solid transparent;
		border-right: 1px solid transparent;
		border-top: 1px solid transparent;
	}

	input[type="search"], input[type="submit"] {
		min-height: 60px;
		font-size: 1em;
		border: none;
		background: #fff;
		padding: 15px 20px;
		z-index: 150;
		margin: 0;
		@include transitionMultiple(border .2,background-color .5s);
	}

	input[type="search"] {
		width: 100%;
		-webkit-appearance: none;
		font-family: $font-family;
		font-size: 1.2rem;

		&:focus {
			outline: none;

			+ input[type="submit"] {
				color: $color-our;
			}
		}
	}

	input[type="submit"] {
		position: absolute;
		top: 0;
		right: 0;
		font-family: "Icomoon";
		color: darken($color-light-grey, 30%);
	}
}

.search-text {
	padding-top: 2em;
	padding-bottom: 5em
}

.search-all-results {
	border-bottom: 1px solid whitesmoke;
	border-left: 1px solid whitesmoke;
	border-right: 1px solid whitesmoke;

	ul {
		max-width: 1100px;
		width: 100%;
		margin: 0 auto;
		background: darken(#fff, 1%);
		padding: 0;
	}

	li {
		list-style: none;
		padding: 30px;
		border-bottom: 1px solid whitesmoke;
		text-align: left;
		overflow: hidden;

		a {
			display: block;
		}

		&:hover {
			background: rgba($color-our, .16);

			.type-icon, .type-name, .type-description {
				color: $color-text-hover;
			}
		}

		&.search-view-all {
			border-bottom: none;
			font-size: .9rem;
			font-weight: bold;
			text-align: center;
			padding: 15px;
			color: $color-text;
			background: darken(#fff, 3%);

			a {
				text-decoration: none;
				color: $color-headline;
			}

			&:hover {
				background: darken(#fff, 4%);

				a {
					color: #000;
				}
			}
		}
	}

	.type-icon, .type-context {
		float: left;
	}

	.type-icon {
		width: 20%;
		font-size: 2rem;
		color: $color-text;

		@media (min-width: $md) {
			width: 5%;
			font-size: 2rem;
			color: $color-text;
		}
	}

	.type-context {
		width: 80%;

		@media (min-width: $md) {
			width: 95%;
		}

		.type-name {
			font-size: 1rem;
			margin-bottom: .15rem;
			font-weight: 600;
			color: $color-headline;
		}

		.type-description {
			font-size: .9rem;
			color: $color-text;
		}

	}
}


.search-all.open {

	input[type="search"], input[type="submit"] {
		color: #000;

		::-webkit-input-placeholder {
		   color: #000;
		}

		:-moz-placeholder {
		   color: #000;
		}

		::-moz-placeholder {
		   color: #000;
		}

		:-ms-input-placeholder {
		   color: #000;
		}
	}

	.search-fieldset {
		border-left: 1px solid whitesmoke;
		border-right: 1px solid whitesmoke;
		border-top: 1px solid whitesmoke;
	}

	.search-all-results {
		display: block;
	}

		@media (max-width: $md) {
			.search-all-form, .search-all-results {
			width: 100%;
		}
	}
}


.frontpage, .community-page {
	.search-all-results {
		width: 80%;
		left: 50%;
		transform: translate(-50%, 0);
		display: none;
		position: absolute;
		z-index: 150;
		max-width: 1100px;
	}
}


.plain {
	max-width: 1160px;
	margin: 0 auto;

	.search-big {
		margin-top: 30px;
		margin-bottom: 0;
	}

	.search-all {
		background: none;
		padding: 0 10px;
	}

	.forum-archive-header {
		margin-bottom:0;
		border-bottom: none;
	}

	.search-all-results {
		width: 100%;

		ul {
			margin: 0;
			width: 100%;
			max-width: 100%;
		}

		.type-icon {
			font-size: 1.6rem;
			opacity: .6;
		}

		.type-context {

			.type-name {
				font-size: .95rem;
			}

			.type-description {
				font-size: .8rem;
			}
		}
	}
}

.forum-page {
	.search-big {
		width: 100%;
		margin: 15px 0 15px 0;

		input {
			font-size: .9rem;
			min-height: 55px;
		}
	}
}

.search-results {

	h2, .search-in {
		font-size: .9rem;
		color: #4f5f63;
		text-transform: uppercase;
		font-weight: 700;
		letter-spacing: .2px;
		display: block;
		margin-bottom: .75rem;
		text-align: left;
	}

	.search-big {
		padding: 0 10px;

		input {
			font-size: .95rem;
			color: $color-space;

			margin-bottom: 30px;

			border: 2px solid rgba($color-space, .33);

			transition: border 150ms ease;

			&:hover {
				border: 2px solid rgba($color-space, .66);
			}

			&:focus {
				color: darken($color-space, 25%);
				border-color: $color-green;
			}
		}
	}

	.message {
		margin-top: 40px;
		font-size: 1.2rem;

		color: darken($color-space, 45%);
	}

	.search-options {
		padding: 0 10px;
	}

	.search-all-results {
		padding: 0 10px !important;
		border: none !important;
		margin: 0 0 50px 0;

		li {
			background: none;
			border: 2px solid rgba($color-space, .33);

			transition: border 150ms ease;

			+ li {
				margin-top: 20px;
			}


			a {
				display: flex;
				align-items: center;
				text-decoration: none;
			}

			.type-icon {
				color: $color-space;
				display: none;

				@media(min-width: $md) {
					display: inline-block;
				}
			}

			.type-context {
				width: 100%;

				@media (min-width: $md) {
					width: 95%;
				}

				.type-name {
					font-size: 1.1rem;
					font-weight: normal;
					color: $color-green;
				}

				.type-description {
					color: darken($color-space, 5%);
					font-size: .95rem;
				}
			}

			&:hover {
				border: 2px solid rgba($color-space, .66);

				.type-icon {
					color: darken($color-space, 45%);
				}

				.type-context {
					.type-name {
						color: darken($color-green, 5%);
					}
					.type-description {
						color: darken($color-space, 25%);
					}
				}
			}

			&.solved {
				background: rgba($color-our, .23);
				border: 2px solid rgba($color-our, .66);

				.type-context {
					.type-name {
						color: rgba(#000, .66);
						position: relative;

						&::after {
							content:"(Solved)";
							font-size: .8rem;
							color: rgba(#000, .55);
						}
					}
				}
			}
		}
	}
}



.search-options {
	margin: 10px 0 40px;

	width: 100%;

	label, label:not(.checkbox) {
		font-size: .9rem;
		color: #4f5f63;
		text-transform: uppercase;
		font-weight: 700;
		letter-spacing: .2px;
		display: block;
		margin-bottom: .5rem;
		text-align: left;
	}
}



.options {
	display: flex;
    justify-content: space-between;
    align-items: center;

	label {
		position: relative;
		flex: 1 1 auto;

		display: flex;
		justify-content: center;
		align-items: center;

		text-align: center;

		margin-right: 20px;

		input[type="checkbox"] {
			display:none;

			&:checked + span {
				border-color: $color-green;
				background: rgba($color-green, .55);

				+ small {
					color: #fff;
				}

				&:hover {
					border-color: $color-green;
					background: rgba($color-green, .45);
				}
			}
		}

		span {
			position: relative;

	        display: flex;
	        justify-content: center;
	        align-items: center;

			flex: 1 1 auto;

			height: 50px;

			margin-right: 0;

			cursor: pointer;
			border: 2px solid rgba($color-space, .22);
			transition: border 150ms ease;
		}



		&:last-child {
			margin-right: 0;
		}



		&:hover {
			color: darken($color-space, 2%);

			span {
				border-color: rgba($color-space, .44);
			}
		}
	}


	small {
		position: absolute;
		left: 50%;
		top: 50%;

		color: rgba($color-space, .66);
		transition: color 150ms ease;
		font-size: .7rem;
		letter-spacing: .5px;

		text-align: center;

		transform: translate(-50%, -50%);

		cursor: pointer;

		@media(min-width: $md) {
			font-size: .75rem;
		}
	}


}
