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

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

// Woocommerce price slider
.widget_price_filter {
    .woocommerce-page.archive .sidebar-content &.widget {
        padding-top: 25px;
        padding-bottom: 25px;
    }
    .price_slider {
        background: var(--porto-slide-bgc);
        margin: 2px 5px 20px;
        border-width: 0;
        border-radius: 0;
    }
    .price_slider_amount {
        line-height: 2em;
        font-size: 1em;
        font-weight: 500;
        letter-spacing: -0.035em;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        .button {
            padding: 0.75em 1.625em;
            font-weight: 600;
            font-size: .75rem;
            order: 2;
            color: var(--porto-dark-color);
            border-color: var(--porto-light-dark-5);
            background-color: var(--porto-light-dark-5);
            transition: color 0.3s, border-color 0.3s, background-color 0.3s;
            &:hover {
                color: var(--porto-body-bg);
                border-color: var(--porto-heading-color);
                background-color: var(--porto-heading-color);
            }
        }
        .from, .to {
            color: var(--porto-heading-color);
        }
    }
    .clear {
        display: none
    }
    .porto_price_filter_chart {
        display: none;
        margin: 3px 5px -3px 5px;
        opacity: 0.75;
    }
    .porto_price_filter_chart.show-chart {
        display: block;
    }
    .ui-slider {
        position: relative;
    }
    .porto_price_filter_chart.show-chart + .ui-slider {
        .ui-slider-range:after {
            position: absolute;
            content: "";
            bottom: 0;
            height: 100px;
            width: 100%;
        }
    }
    .ui-slider .ui-slider-handle {
        position: absolute;
        z-index: 2;
        width: 12px;
        height: 12px;
        cursor: pointer;
        outline: none;
        top: 50%;
        margin-top: -6px;
        margin-left: -6px;
        border-radius: 6px;
        background: var(--porto-primary-color);

    }
    .ui-slider .ui-slider-range {
        position:absolute;
        z-index: 1;
        font-size: .7em;
        background: var(--porto-primary-color);
    }
    #min_price,
    #max_price {
        width: 45%;
        margin-#{$right}: 4%;
        margin-top: 0.3571em;
        margin-bottom: 1.2857em;
    }
    .ui-slider-horizontal {
        height: 2px;
        .porto-slider-price-before,
        .porto-slider-price-after {
            position: absolute;
            bottom: 2px;
            background-color: var( --porto-body-bg, #fff );
            transition: width 0.4s;
        }
        .porto-slider-price-before {
            left: 0;
        }
        .porto-slider-price-after {
            right: 0;
        }
        .porto-slider-price-before:before,
        .porto-slider-price-before:after,
        .porto-slider-price-after:before,
        .porto-slider-price-after:after {
            position: absolute;
            content: '';
            bottom: 0;
            width: 100%;
            height: 100px;
        }
        .porto-slider-price-before:before,
        .porto-slider-price-after:before {
            backdrop-filter: grayscale(1);
        }
        .porto-slider-price-before:after,
        .porto-slider-price-after:after {
            opacity: 0.8;
            background-color: inherit;
        }
    }
    .ui-slider-horizontal .ui-slider-range {
        top: 0;
        height: 100%;
    }
    .ui-slider-horizontal .ui-slider-range-min {
        #{$left}: -1px;
    }
    .ui-slider-horizontal .ui-slider-range-max {
        #{$right}: -1px;
    }
}