// core/search
//
// @since    1.0.0
// @version  2.0.1

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

.wp-block-search {

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

	.wp-block-search__button.wp-block-search__button.wp-block-search__button {
		// Taking only vertical button padding.
		// @see  custom/_button.scss
		padding: var( --theme--css--button--padding--top, 1.125em );

		&.has-icon {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 3em;
			padding: 0;
			font-size: 1em;
			border-width: 0;
			box-shadow: none;

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

	&__button-inside {

		.wp-block-search__inside-wrapper {
			align-items: center;
			padding: .15em;
			border-width: var(--wp--custom--border-width--global);

			:where( & ) {
				background: none;
			}

			// For block editor.
			&[style*="border-radius:"] .wp-element-button {
				border-radius: inherit;
			}
		}

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

		&.wp-block-search__icon-button .wp-block-search__button.wp-block-search__button.wp-block-search__button {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 3em;
			height: 3em;
		}
	}

	&: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% );

		&:not(.has-background) {
			background-color: var(--wp--preset--color--base);
		}

		&.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 {
			//
			// This is questionable as it only works when button text matches the form text color.
			// If button has dark background and white text color, and surrounding background is
			// white (light) color, the outline is invisible.
			// So, it's better not to set the outline color here.
			//
			// outline-color: currentColor;
		}

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

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

		&.has-icon.has-icon.has-icon {
			width: auto;
			height: auto;
			background: none !important;
			color: inherit !important;
		}
	}

	&.wp-block-search__searchfield-hidden[class] {

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

.is-style-button-outline {

	.wp-element-button {

		&.wp-element-button.wp-element-button.has-icon {
			line-height: calc( 3em - 2 * var(--wp--custom--border-width--global) );
			border-width: var(--wp--custom--border-width--global);
		}
	}

	&.wp-block-search__button-inside .wp-element-button.wp-element-button.has-icon {
		line-height: calc( 3em - 2 * var(--wp--custom--border-width--global) );
	}
}
