@import "component.css";:host{display:block;position:relative}dialog{animation:close var(--trans-fast) forwards;background:color-mix(in srgb,var(--bg-tertiary),transparent 10%);border:0;border-radius:var(--bd-radius);outline:100vw solid var(--bg-overlay);padding:var(--m-sm);position:absolute;transition:display var(--trans-fast) allow-discrete,overlay var(--trans-fast) allow-discrete;@media (min-width:420px){font-size:var(--fs-sm);inset:unset;margin-bottom:0;margin-left:0;margin-right:0;margin-top:5px;outline:0;position-anchor:--filter-button;right:anchor(right);top:anchor(bottom)}&:popover-open{animation:open var(--trans-fast) forwards}.button{padding:4px 11px;@media (min-width:420px){font-size:var(--fs-sm)}}}.filter-buttons{display:flex;gap:5px;margin-bottom:var(--m-sm)}.filter-list{color:var(--text-primary);list-style:none;margin:5px 0 0;padding:0;label{align-items:center;cursor:pointer;display:inline-flex;gap:8px;padding:2px;width:100%;&:hover{background:var(--th-hover)}}}.filter-open-btn{anchor-name:--filter-button;background-color:transparent;color:var(--text-primary);padding:2px 11px;transition:background var(--trans-md);&:has(+:popover-open),&:hover{background-color:var(--bg-popover)}& .icon:after{background-color:var(--text-primary)}}input[type=checkbox]{appearance:none;background-color:#fff;background-color:var(--bg-checkbox);background-position:5px 5px;background-size:10px 10px,10px 10px;border:2px solid var(--border-checkbox);border-radius:.25rem;cursor:pointer;height:1.25rem;margin:0;transition:background-size var(--trans-fast) ease-out,background-position var(--trans-fast) ease-out;width:1.25rem;&:checked{background-image:linear-gradient(to bottom,transparent 50%,var(--bg-checkbox) 50%),linear-gradient(to right,var(--bg-checkbox-checked) 50%,transparent 50%);background-position:2px 2px;background-size:24px 24px,24px 24px}&:focus,&:hover{outline:none}}