:root {
    --cpx-filter-gutter: 1rem;
    --cpx-border-color: #ddd;
    --cpx-radius: 0.5rem;
    --cpx-slider-height: 0.4rem;
}

.cpx-woo-filters {
    display:flex;
    flex-wrap:wrap;
    align-items: center;
    justify-content: flex-start;
    gap:var(--cpx-filter-gutter);
    padding:var(--cpx-filter-gutter);
    border-radius:var(--cpx-border-radius);

    background-color: #fff;
}

.cpx-woo-filters .cpx-woo-filters__sort {
    align-self: flex-end;
    margin-left: auto;
}

/* Slider */
.cpx-woo-filters #cpx-price-slider{
    flex: 1 1 200px;
    margin:0 0.5rem;
}
/* Full width on mobile */
@media (max-width: 768px) {
    .cpx-woo-filters #cpx-price-slider{
        flex: 1 1 100%;
    }
}
.cpx-woo-filters .ui-slider {
    position: relative;
}
.cpx-woo-filters .ui-slider-horizontal{
    height:var(--cpx-slider-height);
    background: color-mix(in srgb, var(--e-global-color-secondary) 10%, #fff 90%);
    border-radius:var(--cpx-radius);
}
.cpx-woo-filters .ui-slider-range{
    background: color-mix(in srgb, var(--e-global-color-secondary) 50%, #fff 50%);
    display: block;
    height: 100%;
    position: absolute;
}
.cpx-woo-filters .ui-slider-handle {
    width:1rem;
    height:1rem;
    top:-0.3rem;
    border-radius: 6px;
    background:var(--e-global-color-secondary);
    cursor:pointer;
    display: inline-block;
    position: absolute;  /* default from jQuery-UI theme */
    z-index: 2;          /* stay on top of the range bar */
    cursor: pointer;
    outline: none;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.cpx-woo-filters .ui-slider-handle:hover {
    background: color-mix(in srgb, var(--e-global-color-secondary) 70%, #fff 30%);
}
.cpx-woo-filters .ui-slider-handle:hover:active {
    transform: scale(1.2);
}
.cpx-woo-filters__price {
    width: 250px;
    margin-bottom: -4px;
}
@media screen and (max-width: 768px) {
    .cpx-woo-filters__price {
        width: 100%;
    }
}
.cpx-woo-filters__price__display{
    min-width:8rem;
    text-align:center;
    margin-top: 8px;
    display: block;
    line-height: 1;
}
.cpx-woo-filters__submit{
    margin-left:auto;
}

.cpx-woo-filters__sort {
    position: relative;
}

.cpx-woo-filters__sort select {
    border: none;
    background-color: var(--e-global-color-a0fa980);
    color: var(--e-global-color-text);
    border-radius: var(--cpx-border-radius);
    appearance: none;
    position: relative;
    padding-right: 35px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    outline: none;
    transition: .2s ease-in-out;
}

.cpx-woo-filters__sort select:hover {
    background-color: color-mix(in srgb, var(--e-global-color-a0fa980) 50%, #fff 50%);
}

/* Remove the arrow on the right */
.cpx-woo-filters__sort select::-ms-expand {
    display: none;
}

/* Add a new arrow */
.cpx-woo-filters__sort:after {
    content: '';
    position: absolute;
    top: 40%;
    right: 1rem;
    width: 0.5rem;
    height: 0.5rem;
    border-left: 1px solid var(--e-global-color-text);
    border-bottom: 1px solid var(--e-global-color-text);
    transform: translateY(-50%) rotate(-45deg);
}