.filter__wrap {

    .filter__section {
        transition: margin-bottom .3s ease;

        &:not(:last-child) {
            margin-bottom: 16px;
        }

        .filter__section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            column-gap: 12px;
            cursor: pointer;

            .filter__section-title {
                color: var(--Base-Dark, #171717);
                font-size: 20px;
                font-style: normal;
                font-weight: 400;
                line-height: 150%;
                letter-spacing: 0.2px;
                transition: color .3s ease;
            }

            .filter__section-toggle {
                display: inline-flex;
                width: 24px;
                height: 24px;
                align-items: center;
                justify-content: flex-end;
                fill: none;
                stroke: var(--Gray-6, #9A9AA2);
                flex-shrink: 0;
                transform: rotateX(180deg);
                transition: transform .3s ease, stroke .3s ease;
            }

            &:hover {
                .filter__section-title {
                    color: var(--Color-Light-Red, #b71522);
                }

                .filter__section-toggle {
                    stroke: var(--Color-Light-Red, #b71522);
                }
            }
        }

        &.filters__section--open {
            .filter__section-header {
                .filter__section-toggle {
                    transform: rotateX(0deg);
                }
            }
        }

        .filter__section-content {
            padding-top: 16px;
            padding-bottom: 24px;
            display: none;

            .filters__input-range {
                display: flex;
                column-gap: 8px;
                margin-bottom: 16px;
            }

            .filters__input-search {
                margin-bottom: 16px;
            }

            .filter__item {
                display: flex;

                &:not(:last-child) {
                    margin-bottom: 16px;
                    column-gap: 10px;
                }

                .filter__label {
                    display: flex;
                    width: 100%;

                    .filter__name {
                        color: var(--Base-Dark, #171717);
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 140%;
                        letter-spacing: 0.16px;
                        transition: color .3s ease;
                    }

                    .filter__count {
                        color: var(--Gray-6, #9A9AA2);
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 140%;
                        letter-spacing: 0.16px;
                        display: inline-flex;
                        margin-left: auto;
                    }

                    &:hover {
                        .filters__name {
                            color: var(--Color-Light-Red, #b71522);
                        }
                    }
                }
                &.disabled {
                    opacity: .5;
                    pointer-events: none;
                }
            }

            ul.filters__list {
                max-height: 350px;
                overflow-y: auto;
            }
        }
        
    }
}

#filter-result {
    position: relative;

    .filter__loading {
        position: absolute;
        top: -20px;
        left: -20px;
        width: calc(100% + 40px);
        height: calc(100% + 40px);
        background-color: rgb(255 255 255 / 75%);
        backdrop-filter: blur(10px);

        img {
            animation: naturalSway 1s linear infinite;
            transform-origin: center bottom;
            position: sticky;
            top: 50%;
            margin: 0 auto;
        }
    }
}

#filters-form,
#pagination-block {
    transition: all .3s ease;

    &.lock {
        opacity: .9;
        pointer-events: none;
        filter: blur(1px);
    }
}

select {
    & + .custom-select__wrapper {
        transition: all .3s ease;
    }
    &.lock + .custom-select__wrapper {
        opacity: .9;
        pointer-events: none;
        filter: blur(1px);
        position: relative;
        z-index: 1;
    }
}