.search-box-header {
	display: flex;
	flex-direction: column;
	align-items: center;

	@media (max-width: 660px) {
		padding: 0 16px;
	}

	.search-box-header__search {
		margin-top: 24px;
		display: flex;
		flex-direction: row;
		width: 100%;
		justify-content: center;

		.components-search-control {
			.components-input-base {
				height: 55px;
			}

			.components-input-control__container {
				background-color: var(--studio-white);
			}
		}

		.search-box-header__searchbox {
			max-width: 504px;
			width: 100%;

			.search-component {
				height: 52px;
				z-index: 0;
				max-width: 400px;
				margin: 0 auto;
				border-radius: 4px;
				padding-right: 10px;

				&.is-expanded-to-container {
					height: 100%;
				}

				box-shadow: 0 0 0 1px var(--studio-gray-10);

				.search-component__icon-navigation:focus {
					box-shadow: none;
				}

				.search-component__open-icon,
				.search-component__close-icon {
					color: var(--studio-gray-30);

					&:hover {
						color: var(--studio-gray-60);
					}
				}

				.search-component__icon-navigation {
					margin-right: 2px;
				}

				.search-component__icon-navigation-separator {
					user-select: none;
					color: var(--studio-gray-5);
					margin-bottom: 3px;
				}

				&.is-searching {
					.components-spinner {
						margin: 5px -9px 5px 0;
						width: 50px;
					}
				}

				.search-component__input-fade {
					padding-left: 16px;
				}

				.search-component__open-icon {
					height: 28px;
					margin-right: -9px;
				}

				.search-component__close-icon {
					margin-left: -9px;
					margin-right: -10px;
				}
			}
		}
	}


	.search-box-header__header {
		text-align: center;
		@extend .wp-brand-font;
		font-size: $font-title-large;
		font-weight: 400;
		line-height: 40px;
		color: var(--studio-blue-90);
		margin-top: 24px;
	}
	.search-box-header__sticky-ref {
		padding-bottom: 48px;
	}

	.search-box-header__recommended-searches {
		margin-top: 24px;

		.search-box-header__recommended-searches-title {
			color: var(--studio-gray-50);
			font-size: $font-body-small;
			font-style: normal;
			font-weight: 400;
			line-height: 22px;
			text-align: center;

		}

		.search-box-header__recommended-searches-list {
			margin-top: 12px;
			text-align: center;

			.search-box-header__recommended-searches-list-item {
				&::after {
					content: ",";
					display: inline-block;
					width: 0;
					margin-right: 0.5em;
				}
				&:last-child::after {
					content: none;
				}

				&:hover:not(.search-box-header__recommended-searches-list-item-selected) {
					color: var(--color-link);
					cursor: pointer;
				}

				&:focus {
					outline: none;
				}

				&:not(.search-box-header__recommended-searches-list-item-selected) {
					text-decoration: underline;
				}

				color: var(--studio-gray-100);
				font-size: $font-body-small;
				line-height: 22px;
				text-align: center;
			}
		}
	}
}

.search-box-header.fixed-top {
	.search-box-header__search {
		@media (min-width: 783px) {
			margin-top: 0;
			position: fixed;
			z-index: 20;
			top: var(--masterbar-height);
			left: 0;
			width: 100%;
			max-width: 100%;
			padding: 10px 32px;
			box-sizing: border-box;
			border-bottom: 1px solid var(--studio-gray-5);
			background-color: var(--studio-white);

			.layout__secondary ~ .layout__primary & {
				left: calc(var(--sidebar-width-max) + 1px);
				width: calc(100% - var(--sidebar-width-max) - 1px);

				.has-no-sidebar & {
					left: 0;
					width: 100%;
				}
			}
		}

	}

	.search-box-header__recommended-searches-title {
		@media (min-width: 783px) {
			margin-top: calc(52px + 24px);
		}
	}
}

main.is-logged-out .search-box-header {
	align-items: flex-start;
	margin-bottom: 7px;
	margin-top: -15px;

	&.fixed-top .search-box-header__search {
		justify-content: center;
		background: #e5f4ff;
	}

	.search-box-header__header {
		font-size: rem(44px);
		color: var(--studio-blue-50);
		padding-top: 0;
		line-height: 1.15;
		text-align: left;
		margin-bottom: 16px;
	}
	.search-box-header__subtitle {
		margin-bottom: 0;
	}

	.search-box-header__search {
		justify-content: flex-start;
		margin-top: 17px;

		.search-box-header__searchbox .search-component {
			margin-left: 0;
			height: 55px;
			max-width: 450px;
			box-shadow:
				0 0 0 0 rgba(38, 19, 19, 0.03),
				0 1px 2px 0 rgba(38, 19, 19, 0.03),
				0 4px 4px 0 rgba(38, 19, 19, 0.03),
				0 9px 5px 0 rgba(38, 19, 19, 0.02),
				0 16px 6px 0 rgba(38, 19, 19, 0),
				0 25px 7px 0 rgba(38, 19, 19, 0);

			.search-component__open-icon {
				color: var(--studio-gray-30);
				transform: scaleX(-1);
				height: 33px;
			}

			input.search-component__input[type="search"],
			input.search-component__input[type="search"]::placeholder {
				color: var(--studio-gray-50);
			}

			&.has-focus {
				border-color: var(--color-neutral-20);
				box-shadow: none;
			}
		}
	}
}
