/* ══════════════════════════════════════════════════════════
   filters.css — shared filter-button component.
   Extracted from style.css without changing declarations.
   ══════════════════════════════════════════════════════════ */

.filter-btn {
	display: inline-flex;
	align-items: center;
	height: 32px;
	height: max-content;
	/* padding: 8px 16px; */
	/* padding: 6px 10px; */
	padding: 8px 12px;
	/* border: 2px solid var(--tdim-fr);
	color: var(--tdim-fr); */
	border: 2px solid var(--border);
	color: var(--border);
	background: transparent;
	/* background: color-mix(in srgb, var(--g) 10%, transparent); */
	font-family: "Rubik", sans-serif;
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.1em;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease-out;
	text-transform: uppercase;
	text-align: left;
}

.filter-btn:hover {
	/* border-color: var(--accent2);
	color: var(--accent2); */
	border-color: var(--g);
	color: var(--g);
	/* transform: translateY(-1px); */
	transform: translateY(-2px);
	/* background: color-mix(in srgb, var(--g) 10%, transparent); */
	background: color-mix(in srgb, var(--g) 5%, transparent);
}

.filter-btn.active {
	/* border-color: var(--accent2); */
	border-color: var(--g);
	color: var(--bg);
	/* background: var(--accent2); */
	background: var(--g);
}