/* -------------------------------------------
    Banner
        - Default
            Hotspot
            Grid
        - Fixed, Stretch, Full
        - Banner Background
        - Compatibility with Elementor
            Section, Column Banner
            Banner Video
        - Responsive
---------------------------------------------- */

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

// Default
.banner {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    font-size: 1em;
    border-radius: inherit;
    overflow: hidden;
    figure {
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
        border-radius: inherit;
    }
    figure img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: inherit;
    }
    &.banner-img-hidden > .banner-img img {
        visibility: hidden;
        opacity: 0;
    }
    .banner-content {
        position: relative;
    }
    .banner-item {
        text-align: inherit;
        &.item-block {
            display: block;
        }
        &.item-inline {
            display: inline-block;
        }
    }
    .divider-wrap {
        line-height: 0;
    }
    .divider {
        height: auto;
        border-top: 1px solid;
        background-color: transparent;
    }
    // Hotspot
    .hotspot-wrapper {
        position: absolute;
        z-index: 2;
        transform: translate(-50%,-50%);
    }

    // Grid
    &.creative-grid,
    .creative-grid &,
    .banner-img img {
        height: 100%;
    }

    // Mobile
    html:not(.skrollr) &.parallax>.banner-img img {
        visibility: visible;
        opacity: 1;
    }
}
.banner-img,
.banner-img img { // issue: should be here?
    min-height: inherit;
    max-height: inherit;
    object-fit: cover;
}

// Fixed, Stretch, Full
.banner-fixed {
    > .container,
    > .container-fluid {
        position: absolute;
        z-index: 1;
        .banner-content {
            margin-left: 20px;
            margin-right: 20px;
        }
    }
    .banner-content {
        position: absolute;
        z-index: 1;
    }

    > .container,
    > .container-fluid {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
}
.banner-stretch,
.banner-stretch figure img {
    height: 100%;
}
.banner-full {
    height: 100vh;
    figure img {
        height: 100%;
        object-fit: cover;
    }
}

// Banner Background
.background-effect-wrapper {
    overflow: hidden;
}

.background-effect-wrapper,
.background-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

// Compatibility with Elementor
// Section, Column Banner    
.elementor-row.banner {
    margin-bottom: 0;
    min-height: inherit;
    max-height: inherit;
    object-fit: cover;
}
.elementor-widget-alpha_banner_stretch,
.elementor-widget-alpha_banner_stretch .elementor-widget-container {
    height: 100%;
}
.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,
.banner-fixed > .banner-content > .elementor-column-wrap > .elementor-widget-wrap {
    display: block;
}
.banner-content .elementor-widget__width-auto {
    display: inline-block;
}
.grid-item .elementor-widget-#{$theme-name}_widget_banner,
.grid-item .elementor-widget-#{$theme-name}_widget_banner .elementor-widget-container {
    height: 100%;
}

// Banner Video
.elementor-widget-video {
    .elementor-row > & {
        flex-basis: calc( 100% - var(--alpha-gap) );
    }
    .elementor-column-gap-no > .elementor-row > & {
        flex: 0 0 100%;
    }
    .video-banner & {
        width: 100%;
        .elementor-custom-embed-image-overlay,
        img {
            height: 100%;
            object-fit: cover;
        }
    }
    .elementor-widget-container {
        overflow: unset;
    }
    & > .elementor-widget-container {
        overflow: hidden;
        transform: translateZ(0);
    }
    .elementor-custom-embed-image-overlay {
        cursor: pointer;
        text-align: center;

        &:hover .elementor-custom-embed-play i {
            opacity: 1
        }
        img {
            display: block;
            width: 100%
        }
    }
    .elementor-open-inline .elementor-custom-embed-image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: 50%
    }
    .e-hosted-video .elementor-video {
        object-fit: cover
    }
}

.video-banner {
    iframe {
        height: 100%;
    }
    video {
        position: absolute;
        object-fit: cover;
        width: 100%; 
        height: 100%;
    }
    &.banner-fixed {
        .banner-content {
            position: absolute;
        }
        .elementor-widget-video {
            position: absolute;
            left: 0;
            top: 0;
            &, 
            .elementor-wrapper { 
                width: 100%; 
                height: 100%; 
            }
        }
    }
    .elementor-widget-video .btn-video.elementor-custom-embed-image-overlay {
        position: static;
        width: auto;
        height: auto;
    }
    .no-event {
        pointer-events: none;
    }
}
.elementor-lightbox .elementor-fit-aspect-ratio {
    overflow: hidden;
}
@include mq(lg, max) {
    .elementor-lightbox .elementor-video-container {
        width: 90%;
    }
}


// Responsive
@include mq(md, max) {
    .banner {
        font-size: .9em;
    }
}

@include mq(sm, max) {
    .banner {
        font-size: .8em;
    }
}

@include mq(xs, max) {
    .banner-fixed {
        > .container,
        > .container-fluid {
            > .banner-content {
                margin-left: 15px;
                margin-right: 15px;
            }
        }
    }
}
