/*** ---------- Wux filters searchbar ---------- ***/
.wux-search-form { position: relative; width: 100%; max-width: 40rem;
    .wux-search-form__input { z-index: 9999; 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 { max-height: 85dvh; overflow-y: auto; }
    .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;
        .wpb-search-results__group, .searches { padding: 3rem 1rem 1rem 1rem; }

        .wpb-search-results__group { display: flex; flex-direction: column;
            .wpb-search-result { display: flex; align-items: center; column-gap: 1rem; 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);
                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: 500; 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 { background-color: var(--clr-primary-5); }
            }

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

        .searches { display: flex; flex-direction: column;
            .search { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: .3rem .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);
                &:hover { background-color: var(--clr-primary-5); }
            }
        }

        .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; }
}