/*
 * Listings directory: active-filter pills above the results grid, built by
 * assets/scripts/listing-listing.js (paintPills). Enlign QA 9/27: the filter
 * toggles keep their prompt, and each chosen value shows here with an x to
 * remove it. Kept out of app.css so Dev's stylesheet stays untouched.
 */

.listing-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
}

.listing-pills[hidden] {
	display: none;
}

.listing-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px 6px 12px;
	border: 1px solid var(--color-ink);
	background: var(--color-white);
	color: var(--color-ink);
	font-size: 13px;
	line-height: 1.2;
}

.listing-pill-name {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-grey-700);
}

.listing-pill-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	background: var(--color-ink);
	color: var(--color-white);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

.listing-pill-remove:is(:hover, :focus-visible) {
	background: var(--color-green);
	color: var(--color-ink);
}

.listing-pills-clear {
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--color-ink);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.listing-pills-clear:is(:hover, :focus-visible) {
	color: var(--color-ink-green);
}

/*
 * Filter toggles with a value chosen: the prompt becomes a small label above
 * the value ("EBITDA UP TO" / "$5M"). Built by paintFilterLabel() in
 * listing-listing.js; with nothing chosen the toggle shows the prompt alone.
 */
.listing-filter.has-value [data-listing-filter-label] {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.listing-filter-prompt {
	font-size: 10px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-grey-700);
}

.listing-filter-value {
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* A filter with a value chosen: ink on green, so active filters stand out (Mike, 9/27). */
.listing-filter.has-value > .listing-filter-toggle {
	background-color: var(--color-green);
	border-color: var(--color-green);
	color: var(--color-ink);
}

.listing-filter.has-value .listing-filter-prompt {
	color: var(--color-ink);
}