.filter{--bg-color:var(--gray);--padding-x:var(--spacer);--padding-y:var(--spacer);--col-gap:var(--spacer2);--row-gap:var(--spacer);--cols:1;--item-title-fs:.9rem;--item-title-color:var(--dark);--field-bg-color:#fff;--field-border-radius:var(--border-radius);--field-border-width:1px;--field-border-color:rgba(0,0,0,.075);--field-border-color-hover:rgba(0, 0, 0, .075);--field-border-color-active: rgba(0, 0, 0, .075);--field-placeholder-color:var(--input-placeholder-color);--color-hover:var(--primary-lighten);--color-active:var(--primary);--dp-bg-color:#fff;--dp-title-fw:500;--box-shadow:0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));padding-inline:var(--gap);padding-block:var(--gap);background-color:var(--bg-color);column-gap:var(--col-gap);row-gap:var(--row-gap);border-radius:var(--border-radius)}@media(min-width:768px){.filter{--cols:2}}@media(min-width:992px){.filter{--cols:3}}@media(min-width:1200px){.filter{--cols:4}}.filter-item{display:flex;flex-direction:column;gap:calc(var(--spacer) / 2)}.filter-item-header{font-size:var(--item-title-fs);color:var(--item-title-color);position:relative}.filter-item-body{display:flex;flex-wrap:nowrap;gap:var(--spacer);position:relative}.filter-item-body>*{flex:1;min-width:0}.filter-dropdown{position:relative}.filter-dropdown-header{display:flex;align-items:center;gap:var(--gap);padding-inline:var(--padding-x);padding-block:var(--padding-y);border-radius:var(--field-border-radius);background-color:var(--field-bg-color);border:var(--field-border-width) solid var(--field-border-color);cursor:pointer;transition:border var(--transition-duration) linear,color var(--transition-duration) linear}.filter-dropdown-header:hover{border-color:var(--field-border-color-hover);transition:border var(--transition-duration) linear,color var(--transition-duration) linear;color:var(--color-hover)}.filter-dropdown-header:after{content:"";display:inline-block;width:.4em;height:.4em;margin-left:auto;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--transition-duration) linear;transform-origin:center;flex-shrink:0}.filter-dropdown-header-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:var(--dp-title-fw)}.filter-dropdown-body{display:flex;flex-direction:column;gap:.5em;max-height:200px;overflow-y:auto;background-color:var(--dp-bg-color);padding-block:var(--padding-y);position:absolute;left:1px;right:1px;top:100%;border-radius:0 0 var(--border-radius) var(--border-radius);box-shadow:var(--box-shadow);border-color:var(--field-border-color-active);z-index:1;opacity:0;visibility:hidden;pointer-events:auto;transition:opacity var(--transition-duration) linear}.filter-dropdown--top .filter-dropdown-body{top:auto;bottom:100%;border-radius:var(--border-radius) var(--border-radius) 0 0}.filter-dropdown.is-open .filter-dropdown-body{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--transition-duration) linear}.filter-dropdown-body>*{padding-inline:var(--padding-x)}.filter-dropdown.is-open .filter-dropdown-header{border-radius:var(--border-radius) var(--border-radius) 0 0}.filter-checkbox{--checkbox-size: 1rem;--border-radius:4px;--tick-size: .5rem;--gap:.25rem;transition:color var(--transition-duration) linear}.filter-checkbox:hover{color:var(--color-hover);transition:color var(--transition-duration) linear}.filter-checkbox-label{margin-left:.5em}.filter-checkbox [type=checkbox]{accent-color:var(--color-active)}.filter-checkbox:has(input:disabled){pointer-events:none;opacity:.3}.filter-field{--field-border-color-hover:var(--primary-lighten);--field-border-color-active: var(--primary);position:relative}.filter-field>input{width:100%;padding-inline:var(--padding-x);padding-block:var(--padding-y);border-radius:var(--field-border-radius);background-color:var(--field-bg-color);border:var(--field-border-width) solid var(--field-border-color)}.filter-field>input:hover{border-color:var(--field-border-color-hover)}.filter-field>input:focus{border-color:var(--field-border-color-active)}.filter-field>input:focus-visible{box-shadow:none}.filter-field>input[data-clearinput]{padding-right:2rem}.filter-field:has(input:disabled){pointer-events:none;opacity:.3}.filter-field-clear{position:absolute;top:50%;right:.5rem;transform:translateY(-50%);display:none;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;padding:0;border:0;background:none;color:var(--field-placeholder-color);cursor:pointer;transition:color var(--transition-duration) linear;z-index:1}.filter-field-clear svg{width:100%;height:100%;display:block}.filter-field-clear:hover{color:var(--color-active)}.filter-field-clear.is-visible{display:flex}.filter-tags{--tags-gap: var(--semispacer);--tag-padding-x: var(--semispacer);--tag-padding-y: 0;--tag-gap:0;--tag-fs: .85rem;--tag-fw: 400;--tag-border-radius: var(--border-radius);--tag-border-width: 1px;--tag-border-color: transparent;--tag-color: var(--p-color);--tag-color-hover: var(--dark);--tag-bg-color:rgba(0,0,0,.05);--tag-bg-color-hover:var(--primary-lighten);display:flex;flex-wrap:wrap;gap:var(--tags-gap)}.filter-tags:empty{display:none}.filter-tag{font-size:var(--tag-fs);font-weight:var(--tag-fw);color:var(--tag-color);display:flex;flex-wrap:nowrap;align-items:center;gap:var(--tag-gap);padding-inline:var(--tag-padding-x);padding-block:var(--tag-padding-y);border:var(--tag-border-width) solid var(--tag-border-color);border-radius:var(--tag-border-radius);background-color:var(--tag-bg-color);transition:background-color var(--transition-duration) linear}.filter-tag:hover{background-color:var(--tag-bg-color-hover);transition:background-color var(--transition-duration) linear}.filter-tag-text{text-wrap:nowrap}.filter-tag-value{font-weight:bolder}.filter-tag-btn{--padding-x:var(--semispacer) 0;--padding-y: 0;--fs:2em;--fw:300;--border-width:0;--color:rgba(0,0,0,.2);--color-hover:rgba(0,0,0,.5);box-shadow:none!important;line-height:1;cursor:pointer}.filter-tag-btn:focus,.filter-tag-btn:active,.filter-tag-btn:focus-within{box-shadow:none}