@layer components{.c-filter-button{--filter-button-icon-size:26px;--filter-button-icon-margin-right:15px;--filter-button-background-position-x:0%;--api-filter-button-letter-spacing:2px;--api-filter-button-casing:uppercase;--api-filter-button-color:inherit;--api-filter-button-font-size:15px;--api-filter-button-font-weight:var(--font-weight-semi-bold);color:var(--api-filter-button-color);font-size:var(--api-filter-button-font-size);font-weight:var(--api-filter-button-font-weight);letter-spacing:var(--api-filter-button-letter-spacing);padding-left:calc(var(--filter-button-icon-margin-right) + var(--filter-button-icon-size));position:relative;text-transform:var(--api-filter-button-casing)}.c-filter-button:focus,.c-filter-button:hover{--filter-button-background-position-x:100%}.c-filter-button:after,.c-filter-button:before{background-image:linear-gradient(270deg,currentColor 0,currentColor),radial-gradient(circle at center,transparent 0,transparent 35%,currentColor 40%,currentColor 65%,transparent 70%,transparent 100%),linear-gradient(270deg,currentColor 0,currentColor);background-position:0 50%,100% 50%,var(--filter-button-icon-size) 50%;background-repeat:no-repeat;background-size:calc(var(--filter-button-icon-size) - 8px) 2px,10px 10px,calc(var(--filter-button-icon-size) - 8px) 2px;content:"";height:var(--filter-button-icon-size);inset:50% auto auto 0;position:absolute;transition:background-position .15s ease;width:var(--filter-button-icon-size)}.c-filter-button:before{transform:translateY(calc(-50% - 6px))}.c-filter-button:after,.c-filter-button:focus:before,.c-filter-button:hover:before{background-position:calc(var(--filter-button-icon-size)*-1) 50%,0 50%,100% 50%}.c-filter-button:after{transform:translateY(calc(-50% + 6px))}.c-filter-button:focus:after,.c-filter-button:hover:after{background-position:0 50%,100% 50%,var(--filter-button-icon-size) 50%}}