/*
 * rj-filterbox.css -- companion to rj-filterbox.js.
 * SOURCE OF TRUTH: %rodjrepo%\Web\Shared\rj-filterbox\rj-filterbox.css   VERSION: 2026-10-14
 * Projects get a COPY. Size, border and font of the input itself are the host page's business;
 * this file only positions the wrapper and the x. The wrapper takes the input's place in any flex
 * or grid layout, so put width/flex rules on .rj-filterbox, not on the input.
 */
.rj-filterbox { position: relative; display: inline-flex; align-items: center; }
.rj-filterbox > input { width: 100%; padding-right: 1.6rem; box-sizing: border-box; }

/* One x everywhere: hide the native WebKit/Blink cancel button, show ours. */
.rj-filterbox > input[type="search"]::-webkit-search-cancel-button,
.rj-filterbox > input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

.rj-filterbox-clear {
	position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
	width: 1.2rem; height: 1.2rem; line-height: 1; padding: 0; border: 0; border-radius: 50%;
	background: transparent; color: inherit; opacity: .55; cursor: pointer; font: inherit; font-size: 1rem;
	display: none;
}
.rj-filterbox-has-text > .rj-filterbox-clear { display: inline-block; }
.rj-filterbox-clear:hover, .rj-filterbox-clear:focus-visible { opacity: 1; background: rgba(128,128,128,.18); outline: none; }