
// DIRECTIONAL
// ---------------------------------------------------------------
$rtl: 0;
$dir: ltr !default;

@import "../../theme-imports";

.shop-loop-before { 
    background: #f4f4f4;
    padding: side-values( 12px 2px 2px 12px);
    margin-bottom: 20px; 
    margin-#{$right}: 0
}
body.dark .shop-loop-before { 
    background: rgba(255, 255, 255, .02);
}
a.porto-product-filters-toggle, .shop-loop-before .woocommerce-ordering select, .shop-loop-before .woocommerce-viewing select { border: none; }
.porto-product-filters.style2 { margin-bottom: 0 }
.porto_widget_price_filter .widget-title { position: relative; }
.porto_widget_price_filter .widget-title .toggle { display: inline-block; width: 1.8571em; height: 1.8571em; line-height: 1.7572em; position: absolute; #{$right}: -7px; top: 50%; margin-top: -0.9em; padding: 0; cursor: pointer; font-family: "porto"; text-align: center; transition: all 0.25s; color: #222529; font-size: 17px; }
.porto_widget_price_filter { font-weight: 500; }
.porto_widget_price_filter .fields { display: -ms-flexbox; display: flex; align-items: center; }
.porto_widget_price_filter .fields > *:not(:last-child) { margin-#{$right}: 5px; }
.porto_widget_price_filter label { font-size: 12px; margin-bottom: 0; }
.porto_widget_price_filter .form-control { box-shadow: none; padding: 6px; width: 50px; }
.porto_widget_price_filter .widget-title .toggle:before { content: "\e81c"; }
.porto-product-filters .widget>div>ul, .porto-product-filters .widget>ul { font-size: 12px; font-weight: 600; border-bottom: none; text-transform: uppercase; padding: 0; }
.porto_widget_price_filter .button { text-transform: uppercase; height: 33px; margin-#{$left}: 9px }
.porto-product-filters .widget>div>ul li, .porto-product-filters .widget>ul li { border-top: none; }
.porto-product-filters .widget_product_categories ul li>a,
.porto-product-filters .widget_product_categories ol li>a,
.porto-product-filters .porto_widget_price_filter ul li>a,
.porto-product-filters .porto_widget_price_filter ol li>a,
.porto-product-filters .widget_layered_nav ul li>a,
.porto-product-filters .widget_layered_nav ol li>a, 
.porto-product-filters .widget_layered_nav_filters ul li>a,
.porto-product-filters .widget_layered_nav_filters ol li>a,
.porto-product-filters .widget_rating_filter ul li>a,
.porto-product-filters .widget_rating_filter ol li>a { padding: 7px 0; }
.porto-product-filters .widget_product_categories ul li .toggle {
    top: calc( var( --porto-body-lh, 24px ) / 2 - 5px );
}
.widget_product_categories ul li .toggle:before { content: '\f105' !important; font-weight: 900; font-family: 'Font Awesome 5 Free' !important; }

.woocommerce-ordering label { display: none; }
.woocommerce-ordering select { text-transform: uppercase; }
.porto-product-filters .widget-title { font-family: inherit; }
.porto-product-filters .widget-title .toggle { display: none; }
.porto-product-filters .widget { 
    display: block; 
    max-width: none; 
    width: auto; 
    flex: none; 
    padding: 0; 
    background: #fff url(../../../../images/select-bg.svg) no-repeat; 
    @include if-rtl {
        background-position: 4% -13px; 
    }
    @include if-ltr {
        background-position: 96% -13px; 
    }    
    background-size: 26px 60px; 
    margin-bottom: 10px; 
    margin-top: 0; 
    margin-#{$right}: 10px; 
    position: relative; 
    font-size: 1em; 
    color: #777
}
body.dark .porto-product-filters .widget {
    background: lighten($color-dark,5%) url(../../../../images/select-bg-light.svg) no-repeat; 
    color: #999;
}
.porto-product-filters .widget:last-child { margin-#{$right}: 0 }
.porto-product-filters-body { display: inline-flex; vertical-align: middle; }
@media (min-width: 992px) {
    .porto-product-filters .widget-title { background: none; font-size: inherit !important; border-bottom: none; padding: 0; color: inherit !important; font-weight: 400; cursor: default; height: 34px; line-height: 34px; padding: 0 10px; width: 150px; color: inherit; margin-bottom: 0; transition: none; }
    .woocommerce-ordering select { width: 160px; }
    .porto-product-filters .widget>div>ul, .porto-product-filters .widget>ul, .porto-product-filters .widget > form {
        display: none;
        position: absolute;
        padding: 10px 15px 10px;
        top: 100%;
        margin-top: 9px;
        #{$left}: 0;
        min-width: 220px;
        background: #fff;
        z-index: 99;
        box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }
    body.dark {
        .porto-product-filters .widget>div>ul, .porto-product-filters .widget>ul, .porto-product-filters .widget > form {
            background: lighten( $color-dark, 8% );
        }
    }
    .porto-product-filters .opened .widget-title:before {
        content: '';
        position: absolute;
        top: 100%; 
        border-bottom: 11px solid #e8e8e8;
        border-left: 11px solid transparent; 
        border-right: 11px solid transparent; 
        #{$left}: 20px; 
    }
    body.dark .porto-product-filters .opened .widget-title:before {
        border-bottom-color: lighten( $color-dark, 12% );
    }
    .porto-product-filters .opened .widget-title:after {
        content: ''; 
        position: absolute; 
        top: 100%; 
        border-bottom: 10px solid #fff;
        border-left: 10px solid transparent; 
        border-right: 10px solid transparent; 
        #{$left}: 21px; 
        margin-top: 1px; 
        z-index: 999; 
    }
    body.dark .porto-product-filters .opened .widget-title:after {
        border-bottom-color: lighten( $color-dark, 8% );
    }
}

@media (max-width: 991px) {
    .porto-product-filters .sidebar-toggle { margin-top: 50px; }
    .porto-product-filters.mobile-sidebar { position: fixed; }
    .porto-product-filters .widget { float: none; margin-right: 0; background: none; margin-bottom: 20px; width: 100%; }
    .porto-product-filters .row > .widget { padding-left: 10px !important; padding-right: 10px !important; }
    .porto-product-filters .porto-product-filters-body { height: 100%; overflow-x: hidden; overflow-y: scroll; padding: 30px 20px 20px; display: block !important; top: 0; box-shadow: none; }
    .porto-product-filters .widget-title { padding: 0; background: none; border-bottom: none; background: none; pointer-events: none; margin-bottom: 15px; }
    .porto-product-filters .widget-title .toggle { display: none; }
    .porto-product-filters .widget>div>ul, .porto-product-filters .widget>ul, .porto-product-filters .widget > form { display: block !important; }
    html.sidebar-opened body .porto-product-filters { -transform: translate(-260px); }
    .porto-product-filters.mobile-sidebar { margin-#{$right}: 0; }
}
html.filter-sidebar-opened body > * { z-index: 0; }
html.filter-sidebar-opened .porto-product-filters { z-index: 9001; transition: transform .3s; transform: translate(0px); }
html.filter-sidebar-opened .page-wrapper { #{$left}: 260px }
html.filter-sidebar-opened.sidebar-right-opened .page-wrapper { #{$left}: -260px }
html.filter-sidebar-opened .porto-product-filters .sidebar-toggle i:before { content: '\f00d'; }
html.sidebar-opened body .porto-product-filters .sidebar-toggle i:before { content: '\f1de'; }
