/* FILE: global/form/_search.scss */

form[role="search"],
.form-search,
.search-form {
	display: flex;
	align-items: center;
	position: relative;
	margin: 0;

	[type="search"],
	.search-field {
		width: 100%;
		min-width: 100px;
		margin: 0; // For Search Form block.
	}

	[type="submit"],
	.search-submit {
		padding-left: 1em;
		padding-right: 1em;
		margin-#{$left}: .25em;
	}

	select {
		margin-#{$right}: .25em;
	}

	> label:not([for]) {
		flex: 1 1 auto;
		padding: 0;
	}

	.svg-icon {
		width: auto;
		height: 1.5rem;
		margin: -.25rem 0;
		vertical-align: middle;
	}

	.main-navigation & {
		font-size: 1rem;
	}

	&.has-submit-with-icon {

		[type="search"],
		.search-field {
			padding-#{$right}: 3em;
		}

		[type="submit"] {
			position: absolute;
			width: 3em;
			#{$right}: 0;
			bottom: 0;
			padding-#{$left}: 0;
			padding-#{$right}: 0;
			margin: 0;
			background: none;
			color: inherit;
			border: 1px solid transparent; // To match the form field height.
		}

	}

	.site-header-content > & {
		margin-#{$left}: auto;
	}

	.has-menu-secondary .site-header-content > & {
		margin-#{$left}: 0;

		[type="search"],
		.search-field {
			position: relative;
			width: 3em;
			min-width: 3em;
			padding-#{$left}: 3em;
			padding-#{$right}: 0;
			border-color: transparent;
			z-index: 2;
			cursor: pointer;
		}

		&:focus-within [type="search"],
		&:focus-within .search-field,
		[type="search"]:focus,
		.search-field:focus {
			$width: $golden_minor * 100 +vw;

			width: $width;
			max-width: $width;
			padding-#{$left}: 1em;
			padding-#{$right}: 3em;
			margin-#{$left}: calc( -1 * #{$width} + 3em );
			background: var(--color_header_background);
			border-bottom-color: currentColor;
			box-shadow: 0 0 2em rgba( #000, .15 );
			z-index: 0;
			cursor: text;
		}

	}

		.has-navigation-mobile .site-header-content > & {
			@include media( ( map_get( $breakpoint, $mobile_menu_breakpoint ), 'max-width' ) ) {
				display: none;
			}
		}

	.page-header + & {
		max-width: var(--layout_width_entry_content);
		margin: 0 auto var(--white_space);
	}

}

.wp-block-search {

	&:not(:last-child) {
		margin-bottom: calc( var(--typography_size_html) * #{ $golden } );
	}

	&__label {
		margin-bottom: 0;
	}

}