.block-pxl-accordion{margin-bottom:1rem;margin-top:1rem;--offset:100px;}

.acc-title{cursor: pointer;overflow:hidden;padding-right:2rem;position:relative;z-index:10;}

.acc-title > *{pointer-events:none;}
.acc-item .acc-content{overflow:hidden;max-height:0;transition:all 0.5s;opacity:0;}

.acc-arrow {font-size: 24px;display: block;height: 16px;width: 16px;position: absolute;right: 1px;top: 50%;transition: 0.2s all;margin-top: -4px;}
.acc-arrow:before, 
.acc-arrow:after {background-color: #000;content: '';display: block;height: 2px;width: 13px;position: absolute;top: 0;transition: 0.2s all;}
.acc-arrow:before {left: 0;transform-origin: top left;transform: rotate(45deg);}
.acc-arrow:after {right: 0;transform-origin: top right;transform: rotate(-45deg);}

.acc-item{position:relative;}
.acc-item::before{content:'';display:block;height:var(--offset);margin-top:calc(var(--offset) * -1);pointer-events:none;position:relative;z-index:-1;}
.acc-item:after{background-color:currentColor;content:'';height:1px;position:absolute;bottom:0;left:0;right:0;opacity:0.25;}
.acc-item.open .acc-arrow{transform: rotate(90deg);margin-top: -8px;}
.acc-item.open .acc-arrow:before, 
.acc-item.open .acc-arrow:after {width: 25px;}
.acc-item.open .acc-content{max-height:1000px;opacity:1;}

.accordion-filters{align-items:center;display:flex;justify-content:space-between;flex-wrap:wrap;padding-bottom:10px;position:relative;}
.accordion-filters:after{background-color:currentColor;content:'';height:1px;position:absolute;bottom:0;left:0;right:0;opacity:0.25;}
.accordion-types{flex:100;padding-right:10px;margin-left:-10px;}
.accordion-types__type{font-weight:bold;padding:5px 10px;white-space:nowrap;}
.accordion-types__type:not(.active){color:#ccc;}
.accordion-search{flex:0 1 auto;}