.cl-filter-button input[type=checkbox],.visually-hidden:not(:focus,:active){border:0;clip:rect(0,0,0,0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.cl-filter-button{--cl-filter-button-icon-size:16px;--cl-filter-button-padding:0.35rem 1rem;--cl-filter-button-font-size:var(--cl-font-size-medium);display:inline-block;position:relative}.cl-filter-button.-small{--cl-filter-button-padding:0.25rem 1rem;--cl-filter-button-font-size:var(--cl-font-size-small)}.cl-filter-button.-large{--cl-filter-button-padding:0.5rem 1.5rem;--cl-filter-button-font-size:var(--cl-font-size-large);--cl-filter-button-icon-size:20px}.cl-filter-button>label{align-items:center;background-color:var(--cl-color-container-02);border:1px solid var(--cl-color-border-01);border-radius:2rem;color:var(--cl-color-text-01);cursor:pointer;display:flex;font-size:var(--cl-filter-button-font-size);font-weight:var(--cl-font-weight-medium);gap:6px;padding:var(--cl-filter-button-padding)}.cl-filter-button>label:hover{background-color:var(--cl-color-hover-02);box-shadow:0 0 0 1px var(--cl-color-border-01)}.cl-filter-button>label:active{background-color:var(--cl-color-pressed-02)}.cl-filter-button .cl-filter-button-icon{fill:var(--cl-color-icon-01);height:var(--cl-filter-button-icon-size);width:var(--cl-filter-button-icon-size)}.cl-filter-button input[type=checkbox]:focus-visible+label{background-color:var(--cl-color-hover-02);outline:2px solid var(--cl-color-focus-01);outline-offset:2px}.cl-filter-button input[type=checkbox]:disabled+label{background-color:var(--cl-color-disabled-03);border-color:transparent;box-shadow:none;color:var(--cl-color-disabled-01);cursor:not-allowed}.cl-filter-button input[type=checkbox]:disabled+label .cl-filter-button-icon{fill:var(--cl-color-disabled-01)}.cl-filter-button:has(input[type=checkbox]:checked)>label{background-color:var(--cl-color-container-inverse-01);color:var(--cl-color-text-on-color-01)}.cl-filter-button:has(input[type=checkbox]:checked)>label .cl-filter-button-icon{fill:var(--cl-color-text-on-color-01)}.cl-filter-button:has(input[type=checkbox]:checked)>label:hover{background-color:var(--cl-color-hover-inverse-01);box-shadow:0 0 0 1px var(--cl-color-border-01)}.cl-filter-button:has(input[type=checkbox]:checked)>label:active{background-color:var(--cl-color-pressed-inverse-01)}