.filter-panel {
    .filter-panel-item-toggle.btn {
        text-transform: capitalize;
        line-height: 32px;
        font-weight: 400;
        color: $bcb-filter-block-text-color;
        border: none;
        border-radius: $bcb-filter-block-input-border-radius-field+px;
        background: $bcb-filter-block-input-backgorund-color;
        box-shadow: none;

        &.disabled {
            opacity: 0.4;
        }
      
        .icon {
            &.icon-filter-panel-item-toggle {
                 color: $bcb-filter-block-icon-color;
                &.icon {
                    & > svg {
                        top: 4px !important;
                    }
                }
            }
        }
    }

    .filter-boolean.filter-panel-item {
        background: $bcb-filter-block-input-backgorund-color;
        color: $bcb-filter-block-text-color;
        padding-top: 0px;
        line-height: 38px;
        height: 38px;
        font-weight: 400;        
        border: none;
        border-radius: unset;
    }

    .filter-panel-items-container {
        background: $bcb-filter-block-backgorund-color;
        border-radius: $bcb-filter-block-input-border-radius+px;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        margin: 0;
        width: 100%;
        justify-content: flex-start;
        gap: 2px;
        align-items: center;

        .filter-panel-item {
            margin: 6px; 
            border-radius: $bcb-filter-block-input-border-radius-field+px;

            .form-check-input:checked {
                background-color:$sw-color-brand-primary;
                border-color: $bcb-filter-block-icon-color;
            }
        }
    }
}

.filter-panel-item-toggle.show .icon-filter-panel-item-toggle svg {
    color: $bcb-filter-block-icon-color;
    transform: rotate(180deg);
}

.cms-element-product-listing-actions {
    .sorting {
        margin-left: auto;
        width: auto;

        border: none;
        color: $bcb-product-box-sorting-option-color;
        border-radius: $bcb-product-box-sorting-border-radius+px;
        font-weight: 400;
        margin-top: 0;
        background-color: $bcb-product-box-sorting-backgorund-color;
            height: 36px;
    font-size: inherit;
        .sorting {
            border: 1px solid $theme-product-box-sorting-border-color;
            padding: 6px 30px 6px 10px;
            line-height: normal;
        }
        .custom-select {
            border: none;
        }
    }

    .sorting.custom-select {
        border: 1px solid $theme-product-box-sorting-border-color !important;
        color: $bcb-product-box-sorting-option-color;
        background-color: $bcb-product-box-sorting-backgorund-color;
        border-radius: $bcb-product-box-sorting-border-radius+px;

        &:hover {
            border: unset;
            color: unset;
        }
    }
}

.col-md-auto.first-pagination {
    .pagination-nav {
        display: none;
    }

    .listing-top-text {
        display: flex;
        width: 100%;
        align-items: center;
        color: $bcb-sidebar-block-product-count-color;

        .lbl {
            line-height: 40px;
            color: $bcb-sidebar-block-product-count-heading-color;
            margin-right: 5px;
        }
    }
}

.labelMinimal img {
    width: 24px;
    display: inline-block;
    vertical-align: bottom;
}

label.labellist img {
    width: 24px;
    display: inline-block;
    vertical-align: bottom;
}

.sort--box {
    display: flex;
    align-items: center;

    .listing-layout--wrapper {
        max-width: 100%; 
        display: flex; 
        margin-right: 20px;
        justify-content: space-around;
        align-items: center;
        border-radius: $bcb-product-box-sorting-border-radius+px;
        gap: 5px;
        div {
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        .col--1,
        .col--2 {
            width: auto;
        }

        label {
            margin-bottom: 0;
            cursor: pointer;

            input {
                display: none;
            }

            &.active {
                img {
                    filter: unset;
                height: 24px;
                    
                }
            }

            img {
                    width: 24px;
    height: 24px;
    cursor: pointer;
                filter: invert(92%) sepia(5%) saturate(10%) hue-rotate(314deg) brightness(91%) contrast(96%);
            }
        }
    }
}

.cms-section-sidebar-sidebar-content {
    .cms-block-category-navigation {
        .category-navigation {
            padding-left: 0;
            background: $theme-sidebar-bg;
             border-radius: $bcb-filter-block-input-border-radius+px;
             padding: 5px;

            .col-12 {
                padding: 0;
            }
        }
    }
}

.detail--listing {
    margin-top: 20px;

    .cms-section-sidebar-sidebar-content.col-lg-4.col-xl-3 {
        margin-top: 33px;
        
        margin-bottom: 50px;
       

    }

    .filter-panel {
        .filter-panel-items-container {
            .filter-panel-item {
                margin: 2px;
            }
            padding: 10px;
        }

        .filter-panel-item-toggle.btn {
            box-shadow: none;
        }

        button.filter-panel-item-toggle.btn {
            background: transparent;
            color: $bcb-sidebar-block-headline-color;
            box-shadow: none;
            width: 100%;
        }

        .filter-multi-select-item-label {
            color: $bcb-sidebar-block-filter-content-color;
        }

        .filter-multi-select-count {
            color: $bcb-sidebar-block-headline-color;
        }

        span.icon.icon-arrow-medium-down.icon-xs.icon-filter-panel-item-toggle {
            color: $bcb-sidebar-block-filter-icon-color;

        }

        .filter-panel-item-dropdown {
            border: none;

            .filter-multi-select-list {
                padding: 0 15px 0 0;

                .custom-checkbox {
                    .custom-control-label {
                        &::before {
                            border-radius: 0;
                            border: 1px solid $bcb-borderColor;
                        }
                    }
                }
            }

            .custom-control {
                .custom-control-label {
                    text-transform: capitalize;
                }
            }
        }

        .filter-panel-item-toggle[aria-expanded="true"] svg {
            color: $bcb-sidebar-block-filter-icon-active-color;
        }

        .filter-boolean.filter-panel-item {
            background: $bcb-sidebar-block-navigation-background-color;
            
            color: $bcb-sidebar-block-navigation-category-color;


        }
    }

    .col-md-auto.first-pagination {
        .listing-top-text {
            display: none;
        }
    }

    .category-navigation-box {
        width: 100%;
        margin-top: 18px;

        .category--title {
            width: 100%;
            padding: 10px 11px;
            background: $bcb-sidebar-block-navigation-background-color;
            margin-top: 7px;
            font-size: $bcb-sidebar-block-layout-headline-font-size+px;
            color: $bcb-sidebar-block-navigation-category-color;
            font-weight: $bcb-sidebar-block-layout-headline-font-weight;
            line-height: 1.12;
            text-transform: $bcb-sidebar-block-layout-headline-text-transform;
            border-radius: $bcb-filter-block-input-border-radius-field+px;
        }
    }

    .cms-element-sidebar-filter {
        margin-bottom: 10px;

        .filter--title {
            display: block;
        }

        .btn.filter-panel-wrapper-toggle {
            background: $bcb-brand-primary;
            color: $bcb-whiteColor;
            border: none;
            font-size: 18px;
            font-weight: 400;
            margin-top: 10px;

            .icon {
                color: $bcb-whiteColor;
            }
        }
    }

    .category-navigation-link {
        color: $theme-category-navigation-link-color;

        &:hover {
            color: $theme-category-navigation-link-color-hover;
        }
    }

    .category-navigation.level-0>.category-navigation-entry {
        border-bottom: 1px solid $theme-category-navigation-link-border;
    }

    .category-navigation-link.is-active {
        color: $bcb-sidebar-block-filter-active-color;
    }
}

.filter-panel-item.show {
    .icon-filter-panel-item-toggle {
        svg {
            color: $bcb-whiteColor;
        }
    }
}

.filter-active-preview {
    margin-bottom: 5px;
    margin-right: 0;
}

.filter--title {
    display: none;
}

.filter-rating-select-item-label {
    .product-review-rating {
        margin-right: 2px;
    }
}

.offcanvas.is-fullwidth {
    .filter-panel {
        .filter-panel-items-container {
            .filter-panel-item {
                margin-bottom: 4px;
            }

            background: none;
            padding: 0;
        }

        .filter-panel-item-dropdown {
            border: none;
            background: $bcb-lightGrayColor;
        }
    }
}

@media (max-width: 991.98px) {
    .cms-element-product-listing-actions {
        justify-content: space-between;
    }
    .cms-element-sidebar-filter {
        .btn.filter-panel-wrapper-toggle {
            display: block;
            border: 1px solid $bcb-darkGrayColor;
            border-radius: $bcb-filter-block-input-border-radius+px;
        }
    }

    .detail--listing {
        .cms-element-sidebar-filter {
            .filter--title {
                display: none;
            }
        }

        .cms-section-sidebar-sidebar-content.col-lg-4.col-xl-3 {
            background: transparent;
            margin: 15px 0; 
            .cms-block-category-navigation.position-relative{
                display: none;
            }
        }
    }
}

@media (max-width: 767.98px) {
    .container-main {
        .sort--box {
            display: none;
        }
    }

    .offcanvas {
        &.is-fullwidth {
            .filter-panel {
                .filter-panel-items-container {
                    .filter-panel-item {
                        margin-bottom: 4px;
                        width: 100%;
                    }
                    .filter-panel-item-toggle {
                        &.btn {
                            width: 100%;
                            display: flex;
                            .icon {
                                &.icon-filter-panel-item-toggle {
                                    position: absolute;
                                    right: 14px;
                                }
                            }
                        }
                    }
                }
                .filter-panel-item-dropdown {
                    position: relative !important;
                    transform: translate(0) !important;
                }
            }
            .is--sidebar{
                &.filter-panel{
                    .filter-panel-items-container {                        
                        .filter-panel-item-toggle {
                            
                            &.btn {
                                .icon {
                                    &.icon-filter-panel-item-toggle {
                                        right: 40px;
                                    }
                                }
                            }
                        }
                        .filter-panel-item-toggle[aria-expanded="true"] svg {
                            color: $bcb-filter-block-icon-color;
                        }
                    }
                }

            }
        }
    }
    
}