<!-- Auto-generated by `velinstyle docs generate`. Do not edit. Source: src/utilities/filter.css -->

# Utilities: filter

Source: `src/utilities/filter.css`

| Class | CSS output |
| --- | --- |
| `.velin-filter-check` | `display: none;` |
| `.velin-filter-controls` | `display: flex; flex-wrap: wrap; gap: var(--velin-space-2); margin-block-end: var(--velin-space-4);` |
| `.velin-filter-empty` | `display: block;` |
| `.velin-filter-empty` | `display: none; text-align: center; padding: var(--velin-space-8); color: var(--velin-color-text-muted); grid-column: 1 …` |
| `.velin-filter-group` | `display: contents;` |
| `.velin-filter-label` | `display: inline-flex; align-items: center; gap: var(--velin-space-2); padding: var(--velin-space-2) var(--velin-space-4…` |
| `.velin-filter-label` | `background: var(--velin-color-primary); color: var(--velin-color-on-primary, #fff); border-color: var(--velin-color-pri…` |
| `.velin-filter-label` | `outline: 3px solid var(--velin-color-focus); outline-offset: 2px;` |
| `.velin-filter-label:hover` | `border-color: var(--velin-color-primary); color: var(--velin-color-primary);` |
| `.velin-filter-list` | `display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--velin-space-4);` |
| `.velin-filter-target` | `transition: opacity 200ms ease;` |
| `.velin-filter-target` | `transition: none;` |