/* -------------------------------------------
    Compatible CSS with Elementor
    - Variable
    - Widget
    - Layout
    - Post
    - Tab
    - Image Box
    - Product
---------------------------------------------- */

@use "sass:math";

/* 1. Wolmart SCSS Framework */
@import '../../../assets/sass/config';
@import '../../../assets/sass/mixins';
@import '../../../assets/sass/direction';

// Widget
@if use_component(elementor) {
    @if use(elementor-heading) {
        .elementor-heading-title {
            line-height: var(--wolmart-heading-line-height, var(--wolmart-body-line-height));
        }

        p.elementor-heading-title {
            line-height: var(--wolmart-body-line-height);
        }

        .elementor .elementor-widget-heading hr {
            margin: 1rem auto;
        }
    }

    .alert .elementor-heading-title {
        line-height: inherit;
    }

    .elementor-widget.alert:not(:last-child) {
        margin-bottom: 2rem;
    }

    .elementor-widget .breadcrumb {
        padding: 0;
    }

    .elementor-widget .cat-type-banner .category-content {
        left: auto;
        top: auto;
    }

    /* Layout */
    .elementor div.row>.elementor-element {
        width: calc(100% / (var(--wolmart-col) + var(--wolmart-col-half)));
    }

    .elementor-row.row>.elementor-column {
        padding-left: 10px;
        padding-right: 10px;
    }

    .elementor-row.gutter-lg>.elementor-column {
        padding-right: 15px;
        padding-left: 15px;
    }

    .elementor-row.gutter-sm>.elementor-column {
        padding-right: 5px;
        padding-left: 5px;
    }

    .elementor-row.gutter-xs>.elementor-column {
        padding-right: 1px;
        padding-left: 1px;
    }

    .elementor-row.gutter-no>.elementor-column {
        padding-right: 0;
        padding-left: 0;
    }

    .elementor-section {
        display: flex;
        justify-content: center;

        .elementor-container {
            width: 100%;
            margin-left: 0;
            margin-right: 0;
        }
    }

    .elementor-edit-area-active .elementor-inner-section:first-child {
        margin-top: 0;
    }

    .elementor-container .elementor-column>.elementor-column-wrap>.slider-wrapper .elementor-element-populated {
        padding: 0;
    }

    @if use(elementor-slider) {
        .elementor .slider-wrapper {
            flex-wrap: nowrap;
        }

        // .elementor-widget-wrap.splide-wrapper.active.splide--draggable {
        //     display: block;
        // }
        // .slider-wrapper > .elementor-element.elementor-column.slider-slide {
        //     width: 100%;
        // }
        // .elementor-column-gap-default > .elementor-row.slider-wrapper > .elementor-column > .elementor-element-populated {
        //     padding: 0;
        // }
        // .elementor .elementor-widget-wrap.slider-wrapper.active {
        //     display: block;
        // }
        .elementor-section .row {
            width: calc(100% + 2 * var(--wolmart-gap));
            margin-left: calc(-1 * var(--wolmart-gap));
            margin-right: calc(-1 * var(--wolmart-gap));
        }
    }

    // .elementor-row [class*='elementor-col'] {
    //     padding: 0;
    // }

    @if ($is_not_optimize) {
        .elementor-editor-active .elementor.elementor-edit-area-active .slider-slide .elementor-element.elementor-section {
            margin-top: 0;
        }
    }

    @if use_component(banner) {
        .elementor-row.banner {
            margin-bottom: 0;
        }
    }

    @if use(elementor-full) {
        .elementor-section.elementor-section-full_width>.elementor-container {
            padding-left: 0;
            padding-right: 0;
        }
    }

    .container .elementor-top-section:not(.elementor-section-stretched)>.elementor-container,
    .container-fluid .elementor-top-section:not(.elementor-section-stretched)>.elementor-container,
    .mfp-container .elementor-top-section:not(.elementor-section-stretched)>.elementor-container {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .container .elementor-section-boxed:not(.elementor-section-stretched)>.elementor-container {
        width: 100%;
    }

    .elementor-section.elementor-section-boxed>.elementor-column-gap-no {
        max-width: calc(var(--wolmart-container-width) - 40px);
    }

    .elementor-section.elementor-section-boxed>.container-fluid {
        padding: 0;
    }

    .elementor-section.elementor-section-boxed>.container-fluid.elementor-column-gap-no {
        max-width: calc(var(--wolmart-container-fluid-width) - 40px);
    }

    .elementor-section.elementor-section-boxed>.elementor-column-gap-default {
        max-width: calc(var(--wolmart-container-width) - 20px);
    }

    .elementor-section.elementor-section-boxed>.container-fluid.elementor-column-gap-default {
        max-width: calc(var(--wolmart-container-fluid-width) - 20px);
    }

    .elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated,
    .elementor-column-gap-default>.elementor-column>.elementor-element-populated,
    .elementor-column-gap-default>.elementor-column.banner,
    .elementor-column-gap-default>.elementor-row>.elementor-column.banner {
        padding: 10px;
    }

    .elementor-section>.elementor-column-gap-default {
        margin-left: -10px;
        margin-right: -10px;
        width: calc(100% + 20px);

        &>.accordion,
        &>.tab {
            margin-left: 10px;
            margin-right: 10px;
        }
    }

    .elementor-section.elementor-section-boxed>.elementor-column-gap-narrow {
        max-width: calc(var(--wolmart-container-width) - 30px);
    }

    .elementor-section.elementor-section-boxed>.container-fluid.elementor-column-gap-narrow {
        max-width: calc(var(--wolmart-container-fluid-width) - 30px);
    }

    .elementor-column-gap-narrow>.elementor-row>.elementor-column>.elementor-element-populated,
    .elementor-column-gap-narrow>.elementor-column>.elementor-element-populated,
    .elementor-column-gap-narrow>.elementor-column.banner,
    .elementor-column-gap-narrow>.elementor-row>.elementor-column.banner {
        padding: 5px;
    }

    .elementor-section>.elementor-column-gap-narrow {
        margin-left: -10px;
        margin-right: -10px;
        width: calc(100% + 10px);

        &>.accordion,
        &>.tab {
            margin-left: 5px;
            margin-right: 5px;
        }
    }

    .elementor-section.elementor-section-boxed>.elementor-column-gap-extended {
        max-width: calc(var(--wolmart-container-width) - 10px);
    }

    .elementor-section.elementor-section-boxed>.container-fluid.elementor-column-gap-extended {
        max-width: calc(var(--wolmart-container-fluid-width) - 10px);
    }

    .elementor-section>.elementor-column-gap-extended {
        margin-left: calc(-1 * 15px);
        margin-right: calc(-1 * 15px);
        width: calc(100% + 15px * 2);

        &>.accordion,
        &>.tab {
            margin-left: 15px;
            margin-right: 15px;
        }
    }

    .elementor-section.elementor-section-boxed>.elementor-column-gap-wide {
        max-width: calc(var(--wolmart-container-width));
    }

    .elementor-section.elementor-section-boxed>.container-fluid.elementor-column-gap-wide {
        max-width: calc(var(--wolmart-container-fluid-width));
    }

    .elementor-column-gap-wide>.elementor-row>.elementor-column>.elementor-element-populated,
    .elementor-column-gap-wide>.elementor-column>.elementor-element-populated,
    .elementor-column-gap-wide>.elementor-column.banner,
    .elementor-column-gap-wide>.elementor-row>.elementor-column.banner {
        padding: 20px;
    }

    .elementor-section>.elementor-column-gap-wide {
        margin-left: -20px;
        margin-right: -20px;
        width: calc(100% + 40px);

        &>.accordion,
        &>.tab {
            margin-left: 20px;
            margin-right: 20px;
        }
    }

    .elementor-section.elementor-section-boxed>.elementor-column-gap-wider {
        max-width: calc(var(--wolmart-container-width) + 10px);
    }

    .elementor-section.elementor-section-boxed>.container-fluid.elementor-column-gap-wider {
        max-width: calc(var(--wolmart-container-fluid-width) + 10px);
    }

    .elementor-column-gap-wider>.elementor-row>.elementor-column>.elementor-element-populated,
    .elementor-column-gap-wider>.elementor-column>.elementor-element-populated,
    .elementor-column-gap-wider>.elementor-column.banner,
    .elementor-column-gap-wider>.elementor-row>.elementor-column.banner {
        padding: 25px;
    }

    .elementor-section>.elementor-column-gap-wider {
        margin-left: -25px;
        margin-right: -25px;
        width: calc(100% + 50px);

        &>.accordion,
        &>.tab {
            margin-left: 25px;
            margin-right: 25px;
        }
    }

    .elementor-row .elementor-column {
        min-height: 0;
    }

    .elementor-background-overlay {
        background-color: transparent;
        opacity: 0;
    }

    // Column 
    @if ($is_not_optimize) {
        .elementor-column>.elementor-element-empty {
            min-width: 100px;
        }
    }

    // Grid
    .elementor-section .elementor-container.grid {
        .grid-item>.elementor-widget-wrap:not(.banner-content) {
            padding: 0;

            & {
                height: 100%;
            }
        }
    }

    .elementor-column.grid-item .elementor-row.slider-wrapper {

        &,
        >.slider-slide {
            height: 100%;
        }
    }

    .grid-item .elementor-widget-wolmart_widget_banner,
    .grid-item .elementor-widget-wolmart_widget_banner .elementor-widget-container {
        height: 100%;
    }

    .elementor-section .elementor-container.grid.gutter-xs {
        width: calc(100% + 2px);
        margin-left: -1px;
        margin-right: -1px;
    }

    @media (max-width: 479px) {
        .elementor-section.elementor-section-boxed .elementor-container.grid.gutter-xs {
            width: calc(100% + 2px);
        }
    }

    // Post
    @media (min-width: 576px) {
        .elementor .posts .post-list figure.post-media {
            margin-#{$right}: 2rem;
        }
    }

    // Accordion
    @if use(accordion) {
        .elementor-section>.elementor-container.accordion {
            margin-left: 0;
            margin-right: 0;
            width: 100%;
        }

        .elementor-section-boxed.elementor-section>.elementor-container.accordion {
            max-width: calc(var(--wolmart-container-width) - 40px);
        }

        .elementor-container.accordion,
        .elementor-row.accordion {
            display: block;

            .card {
                display: block;
                width: 100%;
            }
        }

        .card-body.elementor-column {
            padding: 1.3rem .5rem;

            >.elementor-widget-wrap {
                width: auto;
            }
        }

        .accordion .elementor-column .collapsed,
        .accordion .elementor-column .expanding {
            display: none;
        }
    }

    // Tab
    @if use(elementor-tab) {
        .elementor-section>.elementor-container.tab {
            margin-left: 0;
            margin-right: 0;
            width: 100%;
        }

        .elementor-section-boxed.elementor-section>.elementor-container.tab {
            max-width: calc(var(--wolmart-container-width) - 40px);
        }

        .elementor-container.tab {
            &:not(.tab-vertical) {
                flex-direction: column;
            }

            .tab-pane {
                padding: 0;
                width: 100%;
            }

            .elementor-column-wrap {
                padding: 2rem 0;
            }
        }

        .tab-pane.elementor-column {
            width: 100%;
        }

        // .elementor-invisible .tab-content > .active {
        //     visibility: hidden;
        // }
    }

    .elementor-widget-container.tab .nav-tabs {
        position: relative;
        z-index: 1;
    }

    // Image Box
    @if use_component(image-box) {
        .elementor .elementor-widget-wolmart_widget_imagebox .elementor-widget-container .image-box figure {
            margin-bottom: 1rem;
        }
    }

    // Banner
    .elementor-widget-wolmart_banner_stretch,
    .elementor-widget-wolmart_banner_stretch .elementor-widget-container {
        height: 100%;
    }

    .background-none {
        background-image: none !important;
    }

    .background-trans,
    .background-none.elementor-widget-wrap,
    .background-none.elementor-column-wrap {
        background-color: transparent !important;
    }

    @if use_component(banner) {
        .elementor-row.banner {
            // issue: should be here?
            min-height: inherit;
            max-height: inherit;
            object-fit: cover;
        }

        .banner .divider {
            height: auto;
            border-top: 1px solid;
            background-color: transparent;
        }

        .elementor-column.banner>.elementor-widget-wrap.banner-content {
            padding: 0;
        }

        .elementor-element .elementor-column-gap-default>.elementor-row.banner {
            margin-left: 0;
            margin-right: 0;
            width: 100%;
        }

        .banner-fixed>.banner-content,
        .banner-fixed>div>.banner-content {
            width: auto;
        }

        .banner-fixed>.banner-content>.elementor-widget-wrap,
        .banner-fixed>.banner-content.elementor-widget-wrap {
            display: block;
        }

        .banner-content .elementor-widget__width-auto {
            display: inline-block;
        }

        .banner {
            .banner-item.item-inline {
                display: inline-block;
            }

            .item-block {
                display: block;
            }
        }
    }

    .elementor-background-video-container .elementor-background-video-hosted {
        width: 100% !important;
        height: 100% !important;
    }

    @if use(banner-video) {
        .elementor-row>.elementor-widget-video {
            flex-basis: calc(100% - 10px);
        }

        @if use(elementor-gap-no) {
            .elementor-column-gap-no>.elementor-row>.elementor-widget-video {
                flex: 0 0 100%;
            }
        }

        .video-banner {
            iframe {
                height: 100%;
            }

            video {
                position: absolute;
                object-fit: cover;
                width: 100%;
                height: 100%;
            }

            .elementor-widget-video {
                width: 100%;
            }

            &.banner-fixed {
                .elementor-widget-video {
                    position: absolute;
                    left: 0;
                    top: 0;

                    &,
                    .elementor-wrapper {
                        width: 100%;
                        height: 100%;
                    }
                }

                .banner-content {
                    position: absolute;
                }
            }

            .elementor-widget-video .btn-video.elementor-custom-embed-image-overlay {
                position: static;
                width: auto;
                height: auto;
            }

            .no-event {
                pointer-events: none;
            }

            .elementor-widget-video .elementor-custom-embed-image-overlay,
            .elementor-widget-video img {
                height: 100%;
                object-fit: cover;
            }
        }

        @include mq(lg, max) {
            .elementor-lightbox .elementor-video-container {
                width: 90%;
            }
        }
    }

    // Testimonial
    @if use_component(testimonial) {
        .elementor .testimonial {

            img,
            .slider-wrapper & img {
                max-width: none;
                width: 70px;
                height: 70px;
                border-radius: 50%;
                object-fit: cover;
            }
        }
    }

    // Responsive
    @if use(elementor-full) {
        @media (max-width: 479px) {

            .elementor-top-section.elementor-section-boxed>.elementor-column-gap-no,
            .elementor-section-full_width .elementor-section-boxed>.elementor-column-gap-no {
                width: calc(100% - 30px);
            }

            .elementor-top-section.elementor-section-boxed>.elementor-column-gap-default,
            .elementor-section-full_width .elementor-section-boxed>.elementor-column-gap-default {
                width: calc(100% - 10px);
            }

            .elementor-top-section.elementor-section-boxed>.elementor-column-gap-narrow,
            .elementor-section-full_width .elementor-section-boxed>.elementor-column-gap-narrow {
                width: calc(100% - 20px);
            }

            .elementor-top-section.elementor-section-boxed>.elementor-column-gap-extended,
            .elementor-section-full_width .elementor-section-boxed>.elementor-column-gap-extended {
                width: 100%;
            }

            .elementor-top-section.elementor-section-boxed>.elementor-column-gap-wide,
            .elementor-section-full_width .elementor-section-boxed>.elementor-column-gap-wide {
                width: calc(100% + 10px);
            }

            .elementor-top-section.elementor-section-boxed>.elementor-column-gap-wider,
            .elementor-section-full_width .elementor-section-boxed>.elementor-column-gap-wider {
                width: calc(100% + 20px);
            }
        }
    }

    .container,
    .container-fluid {
        .elementor-section.elementor-section-boxed>.elementor-column-gap-no {
            width: 100%;
        }

        .elementor-section.elementor-section-boxed>.elementor-column-gap-default {
            width: calc(100% + 20px);
        }

        .elementor-section.elementor-section-boxed>.elementor-column-gap-narrow {
            width: calc(100% + 10px);
        }

        .elementor-section.elementor-section-boxed>.elementor-column-gap-extended {
            width: calc(100% + 20px);
        }

        .elementor-section.elementor-section-boxed>.elementor-column-gap-wide {
            width: calc(100% + 40px);
        }

        .elementor-section.elementor-section-boxed>.elementor-column-gap-wider {
            width: calc(100% + 50px);
        }
    }

    // Products ( Slider )
    .elementor-msie .elementor-grid,
    .elementor-msie .slider-container>ul.products.slider-wrapper {
        display: block;
    }

    // Products ( Sidebar Widget )
    // .sidebar .elementor-widget-wolmart_widget_products .product-wrap {
    //     padding-left: 1rem;
    //     padding-right: 1rem;
    // }

    // Animation
    .elementor-invisible {
        opacity: 0;
    }

    .appear-animation-visible {
        opacity: 1;
    }

    // Single Product
    // .elementor-widget-container > .social-icons {
    //     width: 100%;
    // }

    /* Header Builder Elements */
    .elementor .switcher-toggle::after {
        font-size: 0.7em;
    }

    // .elementor .switcher ul {
    //     #{$left}: 40%;
    //     #{$right}: auto;
    // }
    .custom-header {
        .elementor-widget {
            width: auto;

            &:not(:last-child)>.elementor-widget-container {
                margin-#{$right}: 2rem;
            }
        }

        .dropdown-menu .elementor-widget {
            width: 100%;

            &:not(:last-child)>.elementor-widget-container {
                margin: 0;
            }
        }
    }

    // .custom-header .cart-dropdown .minicart-icon {
    //     display: inline-flex;
    //     align-items: center;
    //     justify-content: center;
    //     font-size: 1.2rem;
    // }
    .custom-header .elementor .search-wrapper .select-box {
        width: auto;
    }

    .elementor-widget .search-wrapper input.form-control {
        border: none;
    }

    // .custom-header .elementor .search-wrapper select {
    //     max-width: none;
    // }
    // .custom-header .elementor .search-wrapper .input-wrapper {
    //     height: auto;
    // }
    .custom-header .toggle-menu .dropdown-menu-toggle {
        // color: #fff;
        // padding: 13px 15.5px;
        font-weight: 700;
    }

    .custom-header .elementor-top-section {

        .elementor-section,
        .sticky-content-wrapper {
            width: 100%;
        }
    }

    @include mq(lg) {
        .elementor-widget-wolmart_header_mmenu_toggle {
            display: none !important;
        }
    }

    .elementor-element.elementor-widget-wolmart_widget_hotspot {
        position: absolute;
        width: auto;
    }

    .elementor-products-grid .products li.product {
        max-width: none;
        padding: 0;
        margin-bottom: 0
    }

    .elementor-products-grid .products li.product .woocommerce-loop-product__title,
    .elementor-products-grid .products .category-list {
        white-space: normal
    }

    .elementor-products-grid nav.woocommerce-pagination {
        margin-top: 0
    }

    .elementor-button-link .elementor-button-icon {
        text-decoration: none;
    }
}


// Elementor hidden classes
@include mq(md, max) {
    .elementor .elementor-hidden-phone {
        display: none;
    }
}

// Flexbox Container
.e-con {
    --container-default-padding-top: 0;
    --container-default-padding-right: 0;
    --container-default-padding-bottom: 0;
    --container-default-padding-left: 0;
    --container-default-padding-block-start: 0;
    --container-default-padding-block-end: 0;
    --container-default-padding-inline-start: 0;
    --container-default-padding-inline-end: 0;
    --wolmart-con-ex-width: 0px;
}

.e-con-boxed {
    --container-max-width: calc(var(--wolmart-container-width) - 40px + var(--wolmart-con-ex-width));

    &:not(.c-fluid) .e-con-boxed {
        --container-max-width: 100%
    }
}

.c-fluid {
    --container-max-width: calc(var(--wolmart-container-fluid-width) - 40px + var(--wolmart-con-ex-width));

    .c-fluid {
        --container-max-width: 100%
    }
}

.e-con-boxed:not(.c-fluid) .e-con-boxed:not(.c-fluid)>.e-con-inner {
    max-width: none;
    margin-left: calc(-1 * var(--wolmart-con-ex-width) / 2);
    margin-right: calc(-1 * var(--wolmart-con-ex-width) / 2);
}

.e-con-boxed .e-con.e-con-boxed>.e-con-inner,
.container .e-con.e-con-boxed>.e-con-inner,
.container-fluid .e-con.e-con-boxed>.e-con-inner {
    width: calc(100% + var(--wolmart-con-ex-width));
}

@include mq(xs, max) {
    .e-con-boxed>.e-con-inner {
        width: calc(100% - 30px + var(--wolmart-con-ex-width));
    }

    .c-fluid>.e-con-inner {
        width: calc(100% - 30px + var(--wolmart-con-ex-width));
    }
}