/* -------------------------------------------
    Shop Page

 - Toolbox
    (support toolbox, toolbox-left, toolbox-right)
    (support label, select-box)
 - Toolbox Item
    (support full)
 - Layout Button
 - Select Menu
    (support as sidebar's widget < 992px)
    (support toggle)
 - Select Items
 - Toolbox Pagination
 - Toolbox Horizontal
 - Toolbox Navigation
    (support as sidebar-fixed)
    (please place sidebar before toolbox: to know sidebar's close status)
---------------------------------------------- */

@import '../config';
@import '../mixins';
@import '../direction';

/* Theme SCSS Framework */
// @set_theme_configuration

// Toolbox, Filter Clean Widget, Filter Price Widget
.filter-actions,
.toolbox,
.toolbox-left,
.toolbox-right,
.toolbox-item,
.toolbox-item-full {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.toolbox-wrap .top-filter-widgets .filter-actions,
.classic-sidebar .sidebar-content .filter-actions {
    display: none;
}
.filter-actions,
.toolbox {
    justify-content: space-between;
}
.filter-actions {
    .d-icon-arrow-left::before {
        content: if-ltr( "\e97e", "\e97f" );
    }
    .right-sidebar & .d-icon-arrow-left::before {
        content: if-ltr( "\e97f", "\e97e" );
    }
}
.toolbox-top {
    position: relative;
    justify-content: initial;

    .show-info {
        margin-bottom: 1rem;
    }
}
.toolbox-left {
    flex: 1;
    white-space: nowrap;
}
.sidebar-fixed:not(.sidebar-toggle-remain) ~ .main-content {
    .toolbox-top {
        padding-top: 2rem;
    }
    .sticky-toolbox.fixed {
        padding-top: 1rem;
    }
}
.toolbox {
    font-size: font-size( 1.3rem );
    line-height: 1.5;
    padding-bottom: 1rem;
    padding-left: 2px;
    padding-right: 2px;
    transition: padding .4s;
    color: #222;

    &-left, &-right {
        > * {
            margin-#{$right}: 2rem;
        }
    }

    .title {
        margin-bottom: 12px;
        font-size: font-size( 1.8rem );
        color: #222;
    }

    .toolbox-right {
        margin-#{$right}: -2rem;
    }

    .action-wrapper {
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .product-filters {
        margin-#{$right}: 2rem;
    }

    .search-wrapper {
        margin-bottom: 1rem;

        .search-toggle {
            line-height: 17px;
        }

        .input-wrapper {
            min-width: 30rem;
            #{$right}: 0;
        }
    }

    label {
        margin-#{$right}: .8rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    &.toolbox-top select {
        cursor: pointer;
        padding-top: .85rem;
        padding-bottom: .85rem;
        border-radius: 2px;
        max-width: none;
    }

    .select-box::before {
        font-size: 1rem;
        #{$right}: 1rem;
    }

    .toolbox-toggle {
        font-size: font-size(14px);
        padding: 0.6em 0.9em;
        min-width: 87px;
        border-radius: 2px;

        i {
            font-size: 18px;
            margin-#{$left}: 8px;
        }
    }

    .orderby {
        width: font-size(15rem);
        padding-#{$left}: 14px;
    }
}
.toolbox-item {
    flex-wrap: nowrap;
    margin-bottom: 1rem;
}
.toolbox-item-full {
    flex-basis: 100%;
}

.sticky-toolbox.fixed {
    padding: 1rem 2rem 0;
}

@include mq(xs, max) {
    .sticky-toolbox.fixed {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

// Layout Button
.btn-showtype {
    line-height: 1;
    color: #dadada;
    font-size: font-size(22px);

    &:last-child {
        padding-#{$right}: 0;
    }

    &:hover,
    &.active {
        color: #333;
    }

    & + & {
        margin-#{$left}: 6px;
    }
}

.toolbox select {
    border-color: #ccc;
}

// Toolbox Horizontal 1
.toolbox-horizontal {
    z-index: 2;

    .show-info {
        margin-bottom: 1.2rem;
        color: #999;
        font-size: inherit;
    }

    .orderby {
        max-width: font-size(14rem);
    }

    .shop-sidebar .widget-title {
        font-family: inherit;
    }
    &.sticky-content.fixed {
        animation: none;
    }
}
.toolbox-horizontal {
    color: #222;

    .select-box::before {
        font-size: font-size( 1.2rem );
        #{$right}: 1.2rem;
        margin-top: 1px;
    }
}
.toolbox-horizontal .shop-sidebar {
    margin-#{$right}: 0;
}

.toolbox .show-info {
    color: #222;
    font-size: font-size(1.4rem);
}

// Select Items
.select-item {
    position: relative;
    display: inline-block;
    padding: side-values(5px 2.4rem 5px 1.2rem);
    color: #222;
    background: #eee;

    i {
        position: absolute;
        padding: 5px;
        margin-#{$left}: 3px;
        font-size: 9px;
        line-height: 1em;
        top: 50%;
        transform: translateY(-55%);
    }
}

.select-items {
    display: none;

    .main-content & {
        font-size: font-size( 1.2rem );
        margin: 2px 0 1.8rem;
    }

    > * {
        margin: side-values(0 .8rem .5rem 0);
    }

    .filter-clean {
        margin-#{$left}: 1.2rem;
    }
}

@include mq(lg, max) {
    .select-items {
        display: none !important;
    }
}

.filter-actions .filter-clean {
    line-height: 3.7rem;
}

// Toolbox Pagination
.toolbox-pagination {
    position: relative;
    margin-bottom: 10px;
    padding: 2.5rem 2px;
    border-top: 1px solid #e1e1e1;

    .btn-load + & {
        padding: 0;
        border-top: none;
    }

    .pagination:first-child {
        width: 100%;
        text-align: center;
    }
}

// Navigation Style
.toolbox-wrap {
    display: flex;
    flex-direction: column-reverse;
    line-height: 1.3;

    // Toolbox
    .toolbox > * {
        line-height: 37px;
    }
    .top-sidebar-toggle {
        margin-#{$right}: 2rem;
        padding: 0 0.9em;
        font-weight: 600;
        line-height: 33px;

        &:not(:hover):focus {
            background: transparent;
            color: var(--rio-primary-color, #27c);
        }

        .d-icon-filter-2 {
            margin-bottom: 1px;
            font-size: font-size(14px);

            &::before {
                font-weight: 600;
            }
        }
    }
    .show-info {
        margin-bottom: 1rem;
    }
    .toolbox-show-type {
        display: flex;
    }

    // Sidebar Content
    .shop-sidebar .widget-title {
        padding-bottom: .5rem;
        border-top: 0;
    }
    .shop-sidebar.sidebar-fixed .sidebar-content {
        padding-bottom: 0;
    }
    .shop-sidebar .widget.widget_product_tag_cloud .tagcloud {
        margin-top: 15px;
    }
}

// WooCommerce Info
.products .woocommerce-info {
    max-width: 100%;
    flex: 100%;
}

// Loading
.product-archive .d-loading.relative {
    position: relative;
    height: 60px;
}

@include mq(sm, max) {
    .toolbox-pagination {
        flex-direction: column;

        > *:not(:last-child) {
            margin-bottom: 1rem;
            margin-#{$right}: 0;
        }
    }
    .toolbox .toolbox-toggle i {
        margin-#{$left}: 3px;
    }
}

@include mq(sm) {
    .toolbox-horizontal {
        .toolbox-left {
            margin-#{$right}: auto;
        }
    }
    // issue
    .mr-sm-auto {
        margin-right: auto!important;
    }
    // issue
    .me-sm-auto {
        margin-#{$right}: auto!important;
    }
}

@include mq(lg, max) {
    // Shop Sidebar : Mobile
    .toolbox {
        .sidebar-fixed {
            margin-#{$right}: 0;
        }
        .sidebar-content {
            display: block;
        }
    }

    .toolbox-left, .toolbox-right {
        flex-wrap: nowrap;
    }

    .sidebar-content.toolbox-left > * {
        margin-#{$right}: 0;
    }

    .top-filter-widgets.row {
        margin-left: 0;
        margin-right: 0;
        width: 100%;

        >* {
            padding-left: 0;
            padding-right: 0;
        }
    }
}

@include mq(lg) {
    .toolbox .sidebar-content {
        max-width: none;
    }

    // Horizontal Style
    .toolbox-horizontal {
        .sidebar.shop-sidebar {
            .sidebar-content {
                padding-bottom: 0;
            }
        }
        .sidebar-content .filter-actions {
            display: none;
        }
    }
    .toolbox-horizontal .shop-sidebar .widget {
        position: relative;
        margin-bottom: 1rem;
        color: #222;
        border-bottom: none;

        &::before {
            content: '\f078';
            font-family: var(--fa-style-family-classic,"Font Awesome 6 Free");
            position: absolute;
            top: 50%;
            #{$right}: 1.25em;
            margin-top: 1px;
            transform: translateY(-50%);
            font-size: 1.2rem;
            font-weight: 900;
        }

        .widget-title {
            position: relative;
            border: 1px solid #ccc;
            padding: side-values(8px 40px 8px 14px);
            margin-bottom: 0;
            font-size: font-size(1.2rem);
            line-height: 1.5;
            font-weight: 400;
            text-transform: capitalize;
            border-radius: 2px;
        }

        ul, ul::before {
            content: '';
            position: absolute;
            border: 1px solid $border-color-light;
            width: 11px;
        }

        ul {
            top: 100%;
            z-index: 100;
            width: 21rem;
            margin-top: 1rem;
            padding: 1rem 1.4rem 1rem;
            background: #fff;
            opacity: 0;
            visibility: hidden;

            a {
                padding-#{$left}: font-size(2.8rem);
            }

            &::before {
                top: -6px;
                #{$left}: 22px;
                height: 11px;
                border-width: side-values(1px 0 0 1px);
                background: #fff;
                transform: rotate(45deg);
            }
        }

        &.opened > ul {
            opacity: 1;
            visibility: visible;
        }
    }

    // Navigation Style
    .toolbox-wrap {
        .sidebar-content {
            border: solid #eee;
            border-width: 3px 0;
            margin-bottom: 2rem;
            transition: border-color .3s;
        }

        .shop-sidebar .filter-actions:first-child {
            padding: 0;
            border-bottom: none;
        }

        .sidebar-toggle-btn {
            display: none;
        }

        > .closed {
            margin: 0;

            .sidebar-content {
                display: none;

                // issue for toggle animation
                border-color: transparent;
                background: transparent;
            }
        }
        .filter-clean {
            display: none;
            position: absolute;
            #{$right}: 0;
            top: -50px;
        }

        .top-filter-widgets {
            display: flex;

            .filter-actions {
                display: none;
            }

            .widget {
                flex: 1;
                border-bottom: none;
            }
        }


        .sidebar.shop-sidebar .filter-actions {
            border-bottom: none;
        }
    }

    .toolbox-horizontal .shop-sidebar .widget {
        margin-#{$right}: 2rem;
    }
    .toolbox-horizontal .toolbox-left .toolbox-item:not(:last-child) {
        margin-#{$right}: 2rem;
    }
}
@include mq(md, max) {
    .toolbox label,
    .toolbox-top .show-info {
        display: none !important;
    }
}
@include mq(sm, max) {
    .toolbox .toolbox-show-type {
        display: none;
    }
}
@include mq(479px, max) {
    .toolbox-left > *, .toolbox-right > * {
        margin-#{$right}: 1rem;
    }
    .toolbox .toolbox-right {
        margin-#{$right}: -1rem;
    }
    .toolbox .orderby {
        max-width: 12.8rem;
    }
}

/* Sidebar */
.sidebar.shop-sidebar {
    position: relative;

    .sidebar-content {
        padding: 3rem;
    }

    .filter-actions {
        padding: side_values( 0 6px 2rem 2px );
        align-items: flex-start;
        border-bottom: 3px solid $border-color-light;
    }

    .yith-woo-ajax-navigation li,
    .widget .wc-layered-nav-term,
    .widget-price-filter li, 
    .widget_product_categories .cat-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Start YITH Ajax Product Filter (4.2.1) Compatibility */
    .yith-woo-ajax-navigation { 
        .yith-wcan-list {
            .clear {
                display: none;
            }
        }
        .count {
            font-size: 13px;
            &:before {
                content: '(';
            }
            &:after {
                content: ')';
            }
        }
    }
    // Dropdown Type
    .yith-woocommerce-ajax-product-filter.widget_layered_nav .yith-wcan-select-wrapper {
        margin-bottom: 0;
        padding: 0;
        ul {
            margin-bottom: 0;
            li.chosen a {
                width: 100%;
                background-position-x: $right;
                background-position-y: 50%;
            }
        }
    }

    .yith-wcan-list .empty {
        text-decoration: line-through;
    }
}

.shop-sidebar .sidebar-toggle-btn {
    font-size: font-size(14px);
    padding: 0.6em 0.9em;
    min-width: 87px;
    border-radius: 2px;

    i {
        font-size: 18px;
        margin-#{$left}: 8px;
    }
}

.sidebar .widget .wc-layered-nav-term,
.sidebar .widget .with-checkbox li,
.sidebar .widget .yith-wcan-list li {
    padding: 0;

    > a,
    &.empty span {
        position: relative;
        display: block;
        padding: side-values(1.35rem 0 1.35rem 3rem);

        &:hover {
            color: var(--rio-primary-color, #27c);
        }

        &::before {
            content: '';
            position: absolute;
            border: 1px solid;
            border-radius: 2px;
            width: font-size(18px);
            height: font-size(18px);
            top: 50%;
            transform: translateY(-50%);
            #{$left}: 3px;
            color: #999;
            font-size: .7em;
            font-weight: 900;
            font-family: var(--fa-style-family-classic,"Font Awesome 6 Free");
            text-align: center;
            text-indent: 1px; // issue
            line-height: 16px;

            @include only-for-retina(1.5) {
                text-indent: 0;
            }
        }
    }
}

.sidebar .widget .wc-layered-nav-term.chosen > a::before,
.sidebar .widget .with-checkbox li.chosen > a::before,
.sidebar .widget .yith-wcan-list li.chosen > a::before {
    content: "\f00c";
    color: #fff;
    background-color: #222;
    border-color: #222;
}

.classic-sidebar .yith-wcan-reset-navigation {
    padding: 1rem;
    font-size: font-size( 1.1rem );
    margin-top: 12px;
}
.classic-sidebar .widget:first-child {
    border-top: 3px solid #eee;
}

.yith-woo-ajax-reset-navigation {
    .yith-wcan-reset-navigation {
        font-size: calc(14px * var(--rio-typo-ratio, 1));
        padding: 0.6em 0.9em;
        border-radius: 2px;
        background: transparent;
        border: 2px solid var(--rio-primary-color, #27c);
        color: var(--rio-primary-color, #27c);
        transition: background .3s, color .3s;

        &:hover,
        &:focus {
            color: #fff;
            background: var(--rio-primary-color, #27c);
        }
    }

    .shop-sidebar &.widget {
        margin-top: 2rem;

        &:first-child {
            margin-top: 0;
        }
    }
}

// Tag
.sidebar .tag-cloud-link {
    display: inline-block;
    padding: 1.5px .9rem 1.5px;
    margin-bottom: 1rem;
    margin-#{$left}: .14rem;
    border: 1px solid #e1e1e1;
    font-size: font-size( 1.2rem ) !important;
    line-height: 1.58;
    text-transform: capitalize;

    &:hover {
        color: var(--rio-primary-color, #27c);
    }
}

// Filter Action, Price Slider, Filter Clean
.sidebar .price_slider_wrapper {
    padding-#{$right}: 10px;
}
.toolbox .btn-link {
    padding: 0;
}
.filter-clean {
    font-size: font-size( 1.4rem );
    margin-#{$left}: auto;
}

// Responsive
@include mq(lg) {
    .sticky-sidebar-fixed > .filter-actions {
        visibility: hidden;
    }
    .sidebar-fixed.shop-sidebar {
        .sidebar-content {
            padding: 0 0 2rem;
        }
        
        // 5. Toggle Fixed Sidebar
        transition: margin .4s;

        + .main-content {
            //transition: flex-basis .4s, max-width .4s;
            transition: flex .3s, max-width .3s;
        }
    }

    .sticky-sidebar-wrapper.closed {
        height: 0; // to solve issue occurs by closed sticky sidebar for fixed sidebar
    }
    .closed.left-sidebar {
        margin-left: -25%;
    }
    .closed.right-sidebar {
        margin-right: -25%;
    }

    // Remain Toggle
    .sidebar-toggle-remain {
        .toggle-remain {
            position: absolute;
            transition: .4s;
            #{$left}: 2px;
        }
        .filter-clean {
            line-height: 3.7rem;
        }
        
        // for only left sidebar to hide "clean all"'s movement
        .toggle-remain::before {
            content: '';
            position: absolute;
            background-color: #fff;
            #{$right}: calc(100% + 2px);
            width: 20px;
            bottom: -2px;
            top: -2px;
        }
        
        // left sidebar
        &.left-sidebar {
            &.closed {
                .toggle-remain {

                    @include if-rtl {
                        transform: translateX(100%);
                    }
                }

                ~ .main-content .toolbox-top {
                    padding-left: 11rem;
                }
            }
        }

        // right sidebar
        &.right-sidebar {
            &.closed {
                .toggle-remain {
                    #{$left}: -3rem;

                    @include if-ltr {
                        transform: translateX(-100%);
                    }
                }

                ~ .main-content .toolbox-top {
                    padding-right: 11rem;
                }
            }
        }

        .toggle-remain i {
            transition: transform .3s;
        }

        &.closed .toggle-remain i {
            transform: rotateY(180deg);
        }
    }

    .sidebar-toggle-remain.#{$left}-sidebar.closed .toggle-remain {
        #{$left}: calc(100% + var(--rio-gutter-md) * 2);
    }
    .sidebar-toggle-remain.#{$right}-sidebar.closed .toggle-remain {
        #{$left}: calc(-1 * var(--rio-gutter-md) * 2);
    }

    .gutter-sm .sidebar-toggle-remain.#{$left}-sidebar.closed .toggle-remain {
        #{$left}: calc(100% + var(--rio-gutter-sm) * 2);
    }
    .gutter-sm .sidebar-toggle-remain.#{$right}-sidebar.closed .toggle-remain {
        #{$left}: calc(-1 * var(--rio-gutter-sm) * 2);
    }

    .gutter-lg .sidebar-toggle-remain.#{$left}-sidebar.closed .toggle-remain {
        #{$left}: calc(100% + var(--rio-gutter-lg) * 2);
    }
    .gutter-lg .sidebar-toggle-remain.#{$right}-sidebar.closed .toggle-remain {
        #{$left}: calc(-1 * var(--rio-gutter-lg) * 2);
    }
}

/* Toolbox Sticky Top */
@media (max-width: 359px) {
    .toolbox.toolbox-top .orderby {
        max-width: 12.5rem;
        padding-left: 10px;
    }
    .toolbox .toolbox-toggle {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@include mq(xxl) {
    .container-fluid .closed.left-sidebar {
        margin-#{$left}: -16.6666%;
    }
}