/* Search Bar
----------------------------------------------------------*/

#search-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin-left: 50px;
	margin-right: 50px;
	height: $header-height;
	z-index: 9;
	@include transition(all 0.6s ease-out);
	@include opacity(0);
	visibility: hidden;

	@media #{$screen-md} {
		margin-left: 30px;
		margin-right: 30px;
	}

	@media #{$screen-sm} {
		margin-left: 15px;
		margin-right: 15px;
	}

	input.search-bar-input {
		width: 100%;
		font-family: $font-secondary;
		height: $header-height;
		font-size: 20px;
		border: none;
		background: transparent;
		padding-right: 90px;

		@include input-placeholder {
			color: inherit;
			@include opacity(0.5);
		}
	}
	.search-bar-submit {
		position: absolute;
		top: 15px;
		right: 45px;
		border: none;
		background: transparent;
		font-size: 24px;
		color: $color-primary;
	}
	.search-bar-close {
		position: absolute;
		top: 24px;
		right: 18px;
		font-size: 13px;
		@include opacity(0.5);

		&:hover, &:focus {
			@include opacity(1);
		}
	}
}

#top-bar ~ #search-bar {
	top: 40px;
}

body.search-bar-open #search-bar {
	@include opacity(1);
	visibility: visible;
}

html[dir="rtl"] #search-bar {
	.search-bar-submit {
		left: 45px;
		right: auto;
	}
	.search-bar-close {
		left: 18px;
		right: auto;
	}
}