/* -------------------------------------------
    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/direction';
@import '../../../assets/sass/mixins';

// Default
.banner {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    font-size: 1rem;
    border-radius: inherit;

    >figure {
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        margin: 0;
    }

    &.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;
        }

        &:not(a) {
            color: inherit;
        }
    }

    // Hotspot
    .hotspot-wrapper {
        position: absolute;
        z-index: 2;

        &:hover {
            z-index: 3;
        }
    }

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

    // Mobile
    html:not(.skrollr) &.parallax>.banner-img img {
        visibility: visible;
        opacity: 1;
    }
}

.elementor-widget-#{$theme-name}_widget_banner {
    .divider-wrap {
        line-height: 0;
    }

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

.banner-content>p {
    font-size: 1.4rem;
}

.banner-item:last-child {
    margin-bottom: 0;
}

.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,
.banner-fixed>.alpha-section-video>.elementor-open-lightbox>.banner-content>.elementor-widget-wrap,
.banner-fixed>.alpha-section-video>.elementor-open-lightbox>.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: .9rem;
    }
}

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

@include mq(xs, max) {
    .banner-fixed {

        >.container,
        >.container-fluid {
            >.banner-content {
                margin-left: 15px;
                margin-right: 15px;
            }
        }
    }
}