/*
 * Woodmart mobile voice-search control.
 *
 * The control is hidden outside the mobile breakpoint in JavaScript as well
 * as CSS so it does not change the desktop header layout.
 */
.woodmart-voice-search-button {
	display: none;
}

@media (max-width: 768px) {
	.searchform.woodmart-voice-search-ready input[type="text"] {
		padding-inline-end: calc(var(--wd-search-btn-w, var(--wd-form-height, 46px)) + var(--wd-form-height, 46px) + 30px);
	}

	.searchform.woodmart-voice-search-ready .woodmart-voice-search-button {
		position: absolute;
		z-index: 2;
		inset-block: 0;
		inset-inline-end: calc(var(--wd-search-btn-w, var(--wd-form-height, 46px)) + 30px);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--wd-form-height, 46px);
		min-height: unset;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--wd-form-color, currentColor);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.searchform.woodmart-voice-search-ready.wd-with-cat input[type="text"] {
		padding-inline-end: calc(var(--wd-search-cat-w, 0px) + var(--wd-search-btn-w, var(--wd-form-height, 46px)) + var(--wd-form-height, 46px) + 30px);
	}

	.searchform.woodmart-voice-search-ready.wd-with-cat .woodmart-voice-search-button {
		inset-inline-end: calc(var(--wd-search-cat-w, 0px) + var(--wd-search-btn-w, var(--wd-form-height, 46px)) + 30px);
	}

	.searchform.woodmart-voice-search-ready .woodmart-voice-search-button[hidden] {
		display: none;
	}

	.searchform.woodmart-voice-search-ready .woodmart-voice-search-button:hover {
		background: transparent;
		color: var(--wd-form-color, currentColor);
		opacity: 0.7;
	}

	.searchform.woodmart-voice-search-ready .woodmart-voice-search-button:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -4px;
	}

	.woodmart-voice-search-button > span {
		position: relative;
		display: block;
		width: 12px;
		height: 17px;
		border: 2px solid currentColor;
		border-radius: 8px;
		transition: transform 0.2s ease;
	}

	.woodmart-voice-search-button > span::before {
		position: absolute;
		bottom: -8px;
		left: 50%;
		width: 18px;
		height: 10px;
		border: 2px solid currentColor;
		border-top: 0;
		border-radius: 0 0 10px 10px;
		content: "";
		transform: translateX(-50%);
	}

	.woodmart-voice-search-button > span::after {
		position: absolute;
		bottom: -12px;
		left: 50%;
		width: 2px;
		height: 5px;
		background: currentColor;
		content: "";
		transform: translateX(-50%);
	}

	.woodmart-voice-search-button.woodmart-voice-search-listening > span {
		animation: woodmart-voice-search-pulse 1s ease-in-out infinite;
	}

	.woodmart-voice-search-button.woodmart-voice-search-error {
		color: #b32d2e;
	}
}

@keyframes woodmart-voice-search-pulse {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.15);
	}
}