.filter{--filter-dot-size:12px;--filter-active-dot-size:18px;flex-wrap:wrap;justify-content:center;gap:1rem;margin-bottom:2rem;display:flex}.filter .filter__element{cursor:pointer;border:2px solid var(--filter-color-border);border-radius:var(--button-radius);color:var(--filter-color-text);font-weight:var(--font-weight-medium);white-space:nowrap;background-color:transparent;outline:none;align-items:center;gap:9px;padding:.25rem 1rem;transition:all .25s linear;display:flex;position:relative;overflow:hidden}.filter .filter__element>*{pointer-events:none}.filter .filter__element:after{z-index:-1;border-radius:var(--button-radius);background-color:var(--filter-color);content:"";width:0;transition:all .15s linear;position:absolute;top:0;bottom:0;left:0}.filter .filter__element .filter__label{-webkit-user-select:none;-ms-user-select:none;user-select:none}.filter .filter__element .filter__dot{background-color:var(--filter-color);width:var(--filter-dot-size);height:var(--filter-dot-size);border-radius:50%;transition:all .25s linear;display:block;position:relative}.filter .filter__element--active,.filter .filter__element:hover{border-color:var(--filter-color)}.filter .filter__element:focus-visible{border-color:var(--filter-color)}.filter .filter__element--active{background-color:var(--filter-color);color:var(--filter-color-text-active)}.filter .filter__element--active:focus-visible{outline:2px solid var(--filter-color);outline-offset:2px}.filter .filter__element--active:after{width:100%}.filter .filter__element--active .filter__dot{background-color:var(--filter-color-dot-active)}.filter:not(.filter--always-on) .filter__dot:before{opacity:0;background-color:var(--filter-color-dot-active);width:var(--filter-active-dot-size);height:var(--filter-active-dot-size);content:"close";color:var(--filter-color);line-height:1;font-family:var(--font-family-material);border-radius:50%;justify-content:center;align-items:center;transition:all .15s linear .125s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.filter:not(.filter--always-on) .filter__element--active .filter__dot:before{opacity:1}@media (min-width:992px){.filter .filter__element{padding:.5rem 1rem}}.filter{--filter-color-border:color-mix(in srgb, var(--color-contrast) 10%, transparent);--filter-color-dot-active:var(--color-bg);--filter-color-text-active:var(--color-bg);--filter-color-text:var(--color-contrast)}.filter__element{--filter-color:var(--color-primary)}[data-color-scheme=light] .filter__element{--filter-color:var(--color,var(--color-primary))}[data-color-scheme=light] [data-color-scheme=highlight] .filter__element{--filter-color:var(--color-primary)}
/*# sourceMappingURL=filter.min.css.map */