.search-form {
	margin: 0;
	padding: 0;
	.site-header & {
		display: inline-block;
		vertical-align: top;
		position: relative;

		@include media-breakpoint-up(md) {
			display: block;
		}

		.search-form__submit {
			background: none;
		}
		.search-form__field {
			border: none;
		}
	}
	&:after {
		display: block;
		clear: both;
		width: 100%;
		content: '';
	}
	&__field[type='search'] {
		float: left;
		box-sizing: border-box;
		height: 42px;
		width: calc(100% - 67px);
		padding-left: 15px;
		padding-right: 15px;
		border-radius: $border__radius 0 0 $border__radius;
		transition: .3s all ease;
		.search-active & {
			width: calc(100% - 50px);
			padding-left: 20px;
			padding-right: 20px;
		}
		.top-panel & {
			width: 150px;
			height: 30px;
			padding: 7px;
			border: none;
			background: none;
			&:focus {
				box-shadow: none;
			}
		}
	}
	&__submit {
		width: 67px;
		height: 40px;
		padding: 0;
		line-height: 48px;
		border: none;
		border-radius: 0 $border__radius $border__radius 0;
		i.material-icons {
			line-height: 20px;
			display: block;
			height: 20px;
			margin: 0 auto;

			@include font-size(1.5);
		}
		svg {
			width: 18px;
			height: 18px;
		}
		.top-panel & {
			width: 30px;
			padding: 5px 0;
			background-color: transparent;
			&:hover {
				background: none;
			}
			&:active,
			&:focus,
			&:hover {
				box-shadow: none;
			}
		}
		.top-panel__search & {
			width: 30px;
		}
	}
}