/* Shared plain clear button; the original input and dropdown keep their behaviour. */
.wd-search-field {
	--wd-search-clear-color: var(--wd-green);
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

.wd-sitebar .wd-search-field,
.wdh__search-wrap .wd-search-field,
.wdm-search-wrap .wd-search-field,
.wd-home.on-dark .wd-search-field,
.wd-specialist-search .wd-search-field {
	--wd-search-clear-color: var(--wd-text-on-green);
}

.wd-inversion-quick-check .wd-search-field {
	--wd-search-clear-color: var(--wd-green);
}

/* Reserve space even where individual page rules override input padding. */
.wd-search-field > input {
	padding-inline-end: calc(var(--wd-control-h) + var(--wd-space-xs)) !important;
}

.wd-search-field > input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

.wd-search-field > .wd-search-clear,
#tab-grounds .wd-search-field > .wd-search-clear {
	position: absolute;
	inset-inline-end: 0;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: var(--wd-control-h);
	height: var(--wd-control-h);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--wd-radius-sm);
	background: transparent;
	box-shadow: none;
	color: var(--wd-search-clear-color);
	font-family: var(--wd-font);
	font-size: var(--wd-font-size-2xl);
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
}

.wd-search-field > .wd-search-clear:hover,
#tab-grounds .wd-search-field > .wd-search-clear:hover {
	background: transparent;
	color: var(--wd-search-clear-color);
}

.wd-search-field > .wd-search-clear:focus-visible {
	outline: 2px solid var(--wd-cta);
	outline-offset: -2px;
}

.wd-search-field > .wd-search-clear[hidden],
#tab-grounds .wd-search-field > .wd-search-clear[hidden] {
	display: none;
}