/* ------------------------------ */
/* ----------- Filter ----------- */
/* ------------------------------ */

/* General */
.filter__button {
    border-radius: var(--border-radius-small);
    line-height: var(--line-height-1);
    font-size: var(--font-size-2);
    text-transform: uppercase;
    background-color: var(--brand-white);
    box-shadow: var(--box-shadow);
    text-align: left;
    transition: color var(--transition-2), background-color var(--transition-2);
}

.page-scrolled .map__filter .filter__button {
    opacity: 0;
    visibility: hidden;
}

.no-touchevents .filter__button:not(.filter__item):hover, .filter__button--active {
    background-color: var(--brand-brown);
    color: var(--brand-white);
}

.filter__button .icon {
    fill: var(--brand-brown);
    transition: fill var(--transition-2);
}

.filter__button .icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(.85);
}

.no-touchevents .filter__button:hover .icon, .filter__button--active .icon {
    fill: var(--brand-white);
}

.filter__button .icon.icon--filter {
    margin-top: 1px;
}

.filter__items {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    margin-top: var(--spacing-0);
    background-color: var(--brand-white);
    box-shadow: var(--box-shadow);
    z-index: 100;
    width: var(--width-text);
    max-height: 60vh;
    overflow: auto;
    border-radius: var(--border-radius-small);
    transition: opacity .25s;
}

.filter__items--active {
    opacity: 1;
    visibility: visible;
}

.filter__items__category__title {
    display: block;
    margin-bottom: 4px;
    font-size: var(--font-size-1);
    font-weight: bold;
    text-transform: uppercase;
}

.filter__title {
    display: block;
    font-weight: bold;
    margin-bottom: var(--spacing-0);
}

.filter__container {
    display: inline-block;
}

.filter__items[data-type="sort"] .filter__items__container {
    margin: 0;
    line-height: 1;
}

.filter__items[data-type="sort"] .filter__items__container .filter__item {
    padding: 0;
}

.filter__item:not(.filter__item--reset):not(.filter__button) {
    line-height: 1;
}

.filter__containers .filter__container--reset {
    width: auto !important;
}

.filter__items[data-type="sort"] .filter__item {
    padding: 0;
}

.filter__item input, .filter__item label {
    cursor: pointer;
}

.filter__item span {
    font-weight: bold;
}

.filter__item .icon {
    position: relative;
    margin-left: var(--spacing-0);
    top: 2px;
}

.filter__item .filter__checkbox {
    position: relative;
    top: 4px;
    background-color: var(--brand-beige);
    border-radius: 5px;
}

.filter__item .filter__checkbox::before, .filter__item .filter__checkbox::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--brand-brown);
    opacity: 0;
    -webkit-transition: var(--transition-1);
    -o-transition: var(--transition-1);
    transition: var(--transition-1);
}

.filter__item .filter__checkbox::before {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}

.filter__item .filter__checkbox::after {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    -ms-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
}

.no-touchevents .filter__item .filter__checkbox:not(:checked):hover::before, .no-touchevents .filter__item .filter__checkbox:not(:checked):hover::after {
    width: 10px;
    height: 2px;
}

.no-touchevents .filter__item .filter__checkbox:not(:checked):hover::before, .no-touchevents .filter__item .filter__checkbox:not(:checked):hover::after {
    opacity: var(--opacity-2);
}

.filter__item label {
    padding-left: var(--spacing-1);
}

.filter__button__amount {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding-top: 1px;
    font-size: 12px;
    text-align: center;
    border-radius: 50%;
    color: var(--brand-brown);
    background-color: var(--brand-beige);
    opacity: 0;
    transition: var(--transition-2);
}

.filter__button__amount.is-visible {
    opacity: 1;
}

.filter__button--responsibility {
    padding-right: 20px;
}

.filter__button--responsibility label {
    padding-left: calc(25px + var(--spacing-0));
}

.filter__button--responsibility .filter__checkbox {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.filter_buttons .filter__reset {
    opacity: 0;
    visibility: hidden;
}

.filter_buttons .filter__reset.filter__reset--visible {
    opacity: 1;
    visibility: visible;
    transition: var(--transition-2);
}

.no-result-found {
    background-color: var(--brand-beige);
    display: inline-block;
    padding: var(--spacing-4) var(--spacing-4) 35px;
    max-width: var(--width-content);
    border-radius: var(--border-radius);
}






/* Entry */
.filter_buttons .filter__container {
    position: relative;
}

.filter_buttons .filter__items {
    position: absolute;
    left: 0;
}


/* Loading */
.filter_results {
    position: relative;
}

.filter_results.loading {
    padding: 0 20px;
}

.filter_results::before, .filter_results::after {
    content: "";
    position: absolute;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: var(--transition-1);
    -o-transition: var(--transition-1);
    transition: var(--transition-1);
}

.filter_results::before {
    top: -15px;
    left: -15px;
    width: calc(100% + 30px);
    height: calc(100% + 30px);
    background-color: var(--brand-white);
}

.filter_results::after {
    content: "";
    display: block;
    position: absolute;
    top: var(--spacing-6);
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    border: solid 4px transparent;
    border-top-color: var(--brand-brown);
    border-left-color: var(--brand-brown);
    border-radius: 50%;
    -webkit-animation: loading-bar-spinner 400ms linear infinite;
            animation: loading-bar-spinner 400ms linear infinite;
}

@-webkit-keyframes loading-bar-spinner {
    0%   { -webkit-transform: rotate(0deg); transform: rotate(0deg);   transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes loading-bar-spinner {
    0%   { -webkit-transform: rotate(0deg); transform: rotate(0deg);   transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); transform: rotate(360deg); }
}


.filter_results.loading::before, .filter_results.loading::after {
    z-index: 10;
    opacity: 1;
    visibility: visible;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}



/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 390px) {

    .filter__item .filter__checkbox:checked::before, .filter__item .filter__checkbox:checked::after {
        height: 2px;
        opacity: 1;
    }

}


@media all and (min-width: 768px) {

    .filter_buttons .filter__items {
        top: 50px;
    }

    .filter__items__category + .filter__items__category {
        margin-top: var(--spacing-4);
    }

}


@media all and (min-width: 992px) {

    .filter__items {
        padding: calc(var(--spacing-4) - 4px) var(--spacing-4) var(--spacing-4);
    }

    .filter__items__container, .filter__items__category__container {
        margin: -8px calc(-1 * var(--spacing-1));
    }
    
    .filter__item:not(.filter__item--reset):not(.filter__button) {
        padding: 8px var(--spacing-1);
    }

    .filter__items[data-type="sort"] .filter__item {
        display: inline-block;
    }

    .filter__items[data-type="sort"] .filter__item + .filter__item {
        margin-left: var(--spacing-4);
    }

    .filter_results::after {
        left: calc(50% - 25px);
        width: 50px;
        height: 50px;
    }

}


@media all and (min-width: 1240px) {

    .filter__container + .filter__container {
        margin-left: var(--spacing-3);
    }

    .filter__item .filter__checkbox {
        width: 24px;
        height: 24px;
    }

    .filter__item .filter__checkbox:checked::before, .filter__item .filter__checkbox:checked::after {
        width: 13px;
    }

    .filter__button {
        padding: 10px 20px 8px;
    }

    .filter__button .icon {
        right: 15px;
    }
    
    .filter__button:not(.filter__button--map):not(.filter__button--responsibility):not(.filter__button--sort) {
        padding-right: 90px;
    }

    .filter__button.filter__button--sort {
        padding-right: 60px;
    }

    .filter__button__amount {
        right: 42px;
    }

    .filter__button--responsibility .filter__checkbox {
        left: 20px;
    }

    .filter_results {
        min-height: 300px;
    }

    .fake_table .no-result-found {
        margin: var(--spacing-3) var(--spacing-0);
    }

    .filter__button--map {
        padding: 10px 52px 8px 20px;
    }

    .filter__items[data-type="sort"] {
        width: 360px;
    }

}


@media all and (max-width: 1239.98px) {

    .filter_buttons {
        margin-bottom: calc(-1 * var(--spacing-1));
    }

    .filter_buttons .filter__container {
        margin-right: var(--spacing-1);
        margin-bottom: var(--spacing-1);
    }

    .filter__containers .filter__container--reset {
        position: absolute;
    }

    .section__table .filter_buttons .filter__container--reset {
        position: absolute;
        top: 0;
    }

    .filter__containers, .section__table .filter_buttons {
        position: relative;
    }

    .section__table .button--control {
        margin: 0;
    }

    .filter__item .filter__checkbox:checked::before, .filter__item .filter__checkbox:checked::after {
        width: 12px;
    }

}

@media all and (max-width: 1239.98px) and (min-width: 992px) {

    .filter__items[data-type="canton"] {
        max-width: 664px;
    }

    .filter__items:not([data-type="canton"]) {
        max-width: calc(90vw - 2 * var(--spacing-5));
    }

    .filter__containers .filter__container--reset {
        top: -44px;
    }

    .filter__items[data-type="sort"] {
        width: 350px;
    }

    .filter__button .icon {
        right: 16px;
    }

}

@media all and (max-width: 1239.98px) and (min-width: 768px) {

    .filter__button:not(.filter__button--map) {
        padding: 8px 16px 5px;
    }

    .filter__button--map {
        padding: 8px 48px 5px 16px;
    }

    .fake_table .no-result-found {
        margin: 0 var(--spacing-0) var(--spacing-2) var(--spacing-0);
    }

    .filter__item .filter__checkbox {
        width: 23px;
        height: 23px;
    }

}


@media all and (max-width: 1239.98px) and (min-width: 576px) {

    .filter__button__amount {
        right: 42px;
    }

    .filter__button--responsibility .filter__checkbox {
        left: 16px;
    }

    .filter__button:not(.filter__button--map):not(.filter__button--responsibility):not(.filter__button--sort) {
        padding-right: 84px;
    }

    .filter__button.filter__button--sort {
        padding-right: 52px;
    }
}

@media all and (max-width: 1239.98px) and (min-width: 390px) {

    .filter__containers .filter__container--reset {
        left: 179px;
    }

    .section__table--contact .filter_buttons .filter__container--reset {
        left: 158px;
    }

    .section__table--sanctuary_list .filter_buttons .filter__container--reset {
        left: 181px;
    }

    .section__table--history .filter_buttons .filter__container--reset {
        left: 147px;
    }

}


@media all and (max-width: 991.98px) {

    .filter__items[data-type="sort"] {
        width: 288px;
    }

    .section__table .button--control, .section__table .filter_buttons {
        width: 100%;
    }

    .section__table .button--control {
        margin-bottom: var(--spacing-3);
    }

}


@media all and (max-width: 991.98px) and (min-width: 768px) {

    .filter__items[data-type="canton"] {
        max-width: 440px;
    }

    .filter__items[data-type="sort"] .filter__item + .filter__item {
        margin-top: 16px;
    }

    .filter__items:not([data-type="canton"]) {
        max-width: calc(100vw - 2 * var(--spacing-4));
    }

    .filter__items {
        padding: var(--spacing-2) var(--spacing-2) var(--spacing-3);
    }

    .filter__containers .filter__container--reset {
        top: -42px;
    }

    .filter__button--map {
        padding-right: 40px;
    }

    .filter__button .icon {
        right: 13px;
    }

    .filter__items__container, .filter__items__category__container {
        margin: -8px calc(-1 * var(--spacing-0));
    }
    
    .filter__item:not(.filter__item--reset):not(.filter__button) {
        padding: 8px var(--spacing-0);
    }


    .no-result-found {
        padding: var(--spacing-3) var(--spacing-3) var(--spacing-4);
    }

}


@media all and (max-width: 991.98px) and (min-width: 576px) {

    .filter_results::after {
        left: calc(50% - 15px);
        width: 30px;
        height: 30px;
    }

}


@media all and (max-width: 767.98px) {

    .filter__button--map .icon.icon--filter {
        margin-left: 0;
    }
    
    .filter__item:not(.filter__item--reset):not(.filter__button) {
        padding: 5px 2px;
    }

    .filter__item label {
        padding-left: 12px;
    }

    .filter_buttons {
        margin-bottom: 0;
    }

    .filter__button {
        display: inline-block;
        min-width: 150px;
        padding: 8px 64px 5px 14px;
    }

    .filter__button.filter__button--responsibility {
        padding-right: 14px;
    }

    .filter__button--responsibility label {
        padding-left: calc(25px + var(--spacing-0));
    }

    .filter__button--map {
        padding-right: 36px;
        min-width: unset;
    }

    .filter__button .icon.icon--filter {
        margin-top: 0;
    }

    .filter__button .icon {
        right: 10px;
    }

    .filter_buttons .filter__items {
        top: 40px;
    }

    .filter__items[data-type="sort"] .filter__item + .filter__item {
        margin-top: 8px;
    }

    .filter__items__category + .filter__items__category {
        margin-top: var(--spacing-1);
    }

    .filter_results::after {
        left: calc(50% - 10px);
        width: 20px;
        height: 20px;
    }

    .filter__items {
        padding: 10px 15px 15px;
    }

    .filter__containers .filter__container--reset {
        top: -39px;
    }

    .filter__item .filter__checkbox {
        width: 22px;
        height: 22px;
    }

    .filter_buttons .filter__container {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .filter__button__amount {
        right: 34px;
        width: 20px;
        height: 20px;
    }

    .filter__button.filter__button--sort {
        padding-right: 34px;
    }

    .filter__items__category__title {
        margin-bottom: 0;
        padding-top: 5px;
    }

    .no-result-found {
        padding: var(--spacing-2) var(--spacing-2) var(--spacing-3);
    }

}


@media all and (max-width: 767.98px) and (min-width: 576px) {

    .filter__items:not([data-type="canton"]) {
        max-width: calc(100vw - 2 * var(--spacing-3));
    }

    .filter__items[data-type="canton"] {
        max-width: 240px;
    }

    .filter__items[data-type="canton"] .filter__item {
        max-width: 100%;
        flex-basis: 100%;
    }

}


@media all and (max-width: 767.98px) and (min-width: 576px) {



}


@media all and (max-width: 575.98px) and (min-width: 360px) {

    .filter__items {
        max-width: 280px;
    }

}





@media all and (max-width: 389.98px) {

    .filter__item .filter__checkbox {
        width: 23px;
        height: 23px;
    }

    .filter__item .filter__checkbox:checked::before, .filter__item .filter__checkbox:checked::after {
        width: 12px;
        height: 2px;
        opacity: 1;
    }

    .filter__containers .filter__container--reset {
        left: 175px;
    }

    .section__table--contact .filter_buttons .filter__container--reset {
        left: 148px;
    }

    .section__table--sanctuary_list .filter_buttons .filter__container--reset {
        left: 171px;
    }

    .section__table--history .filter_buttons .filter__container--reset {
        left: 142px;
    }
    
}


@media all and (max-width: 359.98px) {

    .filter__items {
        max-width: calc(100vw - 2 * var(--spacing-1));
    }

}