/*** ---------- Wux filters searchbar ---------- ***/
.wux-search-form { position: relative; width: 100%; max-width: 40rem;
    .wux-search-form__submit-icon { display: none; }
    input[data-wux-filters-input]:not(.wpb-hero__search-input).has-pointer-focus:focus { border-color: var(--clr-border); outline: 1px solid var(--clr-border); outline-offset: 1px; }
    .wux-search-form__input { z-index: 999; position: relative;
        .wux-search-form__icon { position: absolute; left: 1.4rem; font-size: 1.4rem; top: 50%; transform: translateY(-50%); }
        [type="search"] { padding-left: 4.4rem; }
    }
    .wux-search-form__results, .wux-search-form__history { max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain; }
    .wux-search-form__results, .wux-search-form__history { pointer-events: none; visibility: hidden; opacity: 0; z-index: 8888; position: absolute; left: 0; top: calc(100% - 2rem); right: 0; background-color: #fff; border-radius: 0 0 .5rem .5rem;
        border: 1px solid var(--clr-border); box-shadow: 0 1.2rem 2.4rem rgb(var(--clr-dark-rgb), .16);
        .wpb-search-results__group { padding: 1rem; }
        .searches { padding: 1rem; }

        .wpb-search-results__group { display: flex; flex-direction: column;
            .wpb-search-result { display: flex; align-items: center; column-gap: 1rem; min-height: 4.8rem; cursor: pointer; padding: .6rem; border-radius: .4rem; font-size: 1.5rem; text-decoration: none; color: var(--clr-text); transition-property: background-color, color; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function);
                & + .wpb-search-result { border-top: 1px solid var(--clr-primary-20); padding-block: 1rem; }
                mark { background: transparent; font-weight: bold; }
                .wpb-search-result__image { width: 3.8rem; height: 3.8rem; min-width: 3.8rem; border-radius: .4rem; overflow: hidden;
                    img { width: 100%; height: 100%; object-fit: contain; }
                }
                .wpb-search-result__title { font-weight: 400; line-height: 1.2; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
                .fa-chevron-right { --w: 1.2rem; --h: 1.2rem; margin-left: auto; }
                &:hover, &:focus-visible { background-color: rgba(var(--clr-primary-rgb), .06); color: var(--clr-primary); }
                &:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: -2px; }
            }

            + .wpb-search-results__group { border-top: 1px solid var(--clr-primary-20); margin-top: 0; padding-top: 2rem; }
        }

        .searches { display: flex; flex-direction: column;
            .search { display: flex; justify-content: space-between; align-items: center; min-height: 4.4rem; cursor: pointer; padding: .8rem 1rem; border: 1px solid transparent; border-radius: .4rem; font-size: 1.5rem; line-height: 1.4; text-align: left; text-decoration: none; color: var(--clr-text); transition-property: background-color, color; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function);
                &:hover, &:focus-visible { background-color: rgba(var(--clr-primary-rgb), .06); color: var(--clr-primary); }
                &:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: -2px; }
            }
            button.search { width: 100%; min-width: 2.4rem; margin: 0; background: transparent; font-family: inherit; font-weight: inherit; white-space: normal; }
            button.search + button.search{border-top: 1px solid var(--clr-primary-20);}
        }

        .wux-search-error { padding: 4rem 2rem 2rem 2rem; text-align: center; }
    }
    .wux-search-form__backdrop { pointer-events: none; visibility: hidden; background-color: #000; opacity: 0; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 4; transition: var(--ts-25) ease; }

    &.is-active {
        .wux-search-form__backdrop { pointer-events: all; visibility: visible; opacity: .4; }

        &.shows-history {
            .wux-search-form__history { pointer-events: all; visibility: visible; opacity: 1; }
        }
        &.shows-results {
            .wux-search-form__results { pointer-events: all; visibility: visible; opacity: 1; }
        }
    }
}

/*** ---------- Wux filters ---------- ***/
form#wux-filters { display: flex; flex-direction: column; }

/*** ---------- Wux filters - filter facets ---------- ***/
.wf-filter-facet {
    .wf-filter-facet__toggle { display: none; }
    .wf-filter-facet__label { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
    .wf-filter-facet__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease;
        .wf-filter-facet__options { overflow: hidden; padding-top: 1rem; }
        .wf-filter-facet__option { cursor: pointer; display: flex; align-items: center; margin: 0; column-gap: 1rem;
            .wf-filter-facet__option-input { margin: 0; }
            .wf-filter-facet__option-label { font-size: 1.4rem; line-height: 1.4; }
            .wf-filter-facet__option-count { margin-left: auto; font-size: 1.4rem; opacity: .75; }
    
            + .wf-filter-facet__option { margin-top: .5rem; }
        }
    }

    .wf-filter-facet__more-label { cursor: pointer; user-select: none; display: block; padding-top: 1rem;
        .is-checked { display: none; }
        .is-unchecked { display: block; }
    }
    .wf-filter-facet__more-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
         
    
    .wf-filter-facet__toggle:checked + .wf-filter-facet__more-label {
        .is-checked { display: block; }
        .is-unchecked { display: none; }
    }
    .wf-filter-facet__toggle:checked + .wf-filter-facet__label + .wf-filter-facet__body,
    .wf-filter-facet__toggle:checked + .wf-filter-facet__more-label + .wf-filter-facet__more-content,
    .wf-filter-facet__toggle:checked + .wf-filter-facet__more-content { grid-template-rows: 1fr; }
}