/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.posts__filter {
    position: fixed;
    top: 0;
    right: 0;
    width: 40rem;
    height: 100%;
    background-color: white;
    z-index: 9999;
    padding: 2rem;
    transition: transform .3s ease;
    transform: translateX(100%);
}
.posts__filter--open {
    transform: translateX(0);
}
.posts__filter .filter {
    display: flex;
    flex-flow: column nowrap;
}
.posts__filter .filter__header .close-filter {
    position: absolute;
    top: 2rem;
    right: 2rem;
    cursor: pointer;
}
.posts__filter .filter-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.posts__filter .filter-block__header h4 {
    margin-bottom: 0;
}
.posts__filter .filter__wrapper .filter-block__header svg {
    transition: .3s ease;
}
.posts__filter .filter__wrapper .filter-block__header--open svg {
    transform: rotateX(180deg);
}
.posts__filter .filter__wrapper .filter-block__components {
    max-height: 0;
    overflow: hidden;
    transition: .3s ease;
}
.posts__filter .filter__wrapper .filter-block__components--open {
    max-height: 100rem;
    transition: .6s ease;
}
.posts__filter .filter__wrapper select {
    width: 100%;
}
.posts__filter .filter__footer {
    margin-top: 2rem;
}

.posts__filter-top .filter__header,
.posts__filter-top .filter-block__header,
.posts__filter-top .filter__footer .close-filter {
    display: none;
}
.posts__filter-top .filter__wrapper {
    display: flex;
    justify-content: space-between;
    padding: 2rem 0;
}
.posts__filter-top .checkbox-group,
.posts__filter-top .radio-group {
    display: flex;
}

.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 0;
    margin-bottom: 4rem;
}
.filter-bar .filter-bar__right {

}
.filter-bar .filter-bar__results {
    color: white;
}
.filter-bar .filter-bar__results .number {
    margin-right: 1rem;
    font-weight: 700;
}
.filter-bar .filter-toggle:before,
.filter-bar .filter-toggle span {
    pointer-events: none;
}

.VuePagination__nav {
    display: flex;
    justify-content: center;
}
.VuePagination__pagination {
    display: inline-flex;
}
.filter-external-toggle span {
    pointer-events: none;
}