// core/search
//
// @since    1.0.0
// @version  1.2.1

@import '../_tools/_index';
@import '../_setup/_index';

.wp-block-search {
	// Border color has to be here, not in `theme.json`
	// due to WP global styles producing block CSS selector
	// with `:where()` (0 specificity), so our global border
	// color inheritance styles override that selector.
	border-color: currentColor;

	.wp-block-search__input {
		padding: var(--wp--custom--spacing--input-vertical) 1em;
		border-width: 2px;
		border-color: inherit;
		border-radius: var(--wp--custom--border-radius--form-field);
	}

	.wp-block-search__button.wp-block-search__button.wp-block-search__button {
		// Modified global button padding.
		// @see  custom/_button.scss
		padding: var(--wp--custom--spacing--input-vertical) 1em;
	}

	&__button-inside {

		.wp-block-search__inside-wrapper {
			align-items: center;
			padding: .15em;
			border-width: 2px;

			:where( & ) {
				background: none;
			}
		}

		.wp-block-search__input {
			border-color: transparent;
		}

		&.wp-block-search__icon-button .wp-block-search__button.wp-block-search__button.wp-block-search__button {
			width: 3em;
			height: 3em;
			padding: 0;
			font-size: 1em;
			line-height: 3;
			border-width: 0;
			box-shadow: none;

			svg {
				width: $ratio + em;
				height: $ratio + em;
				vertical-align: middle;
			}
		}
	}

	&:not(.has-background, .is-style-button-outline) .wp-block-search__button {
		border-color: var(--theme--css--button--color--border) !important;
	}

	&__inside-wrapper {
		border-radius: var(--wp--custom--border-radius--form-field);
	}

	.is-nowrap & {
		min-width: 4em;
	}
}

.wp-block-search__button-only {
	position: relative;
	z-index: 1;

	.wp-block-search__input {
		position: absolute;
		height: calc( #{ $ratio + em } + 2 * var(--wp--custom--spacing--input-vertical) ); // `$ratio` is line height.
		min-height: 100%;
		inset-inline-end: calc( 100% + #{ $ratio_min + em } );
		top: 50%;
		transform: translateY( -50% );

		&.has-background {
			padding: var(--wp--custom--spacing--input-vertical) 1em;
		}
	}

		&:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
			min-width: 16em;
		}

	.wp-block-search__button {
		align-items: center;
		transform: none !important;

		&:focus {
			outline-color: currentColor;
		}

		&[class][aria-expanded="true"] {
			max-width: 100%;
		}

		svg {
			width: $ratio + em;
			height: auto;
		}
	}

		&.wp-block-search__icon-button .wp-block-search__button[class] {
			padding: 0;
			font-size: 1em;
			background: none !important;
			color: inherit !important;
			border-width: 0;
			box-shadow: none;
		}

	&.wp-block-search__searchfield-hidden {

		&,
		.wp-block-search__inside-wrapper {
			overflow: visible; // Make outline visible.
		}
	}
}
