// @import '../../../node_modules/plyr/src/sass/plyr.scss';

.wadi_video_container {

    position: relative;

    // overflow: hidden;

}


// .video_outer_container {
//     background: yellow;
//     min-height:150px;
//     height: 100%;
// }

.hide_video_thumb {
    display: none;
}

.wadi_self_hosted_video_container {
    display: none;
    
    &.show_video {
        display: block;
    }
}


// video[poster] {
//     height: 100%;
//     width: 100%;
// }

// .wadi_video_thumbnail{
//     width: 100%;
// }



.wadi_close_sticky_container {
    display: none;
}

.video_outer_container {
    position: absolute;
    width: 100%;
    height: 100%;

    cursor: pointer;

    .wadi_vimeo_wrap {
        -js-display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        margin: 10px;
        margin-right: 10px;
        -webkit-transition: opacity 0.2s ease-out;
        transition: opacity 0.2s ease-out;
        margin-right: 4.6em;
        .wadi_vimeo_video_portrait {
            width: 60px;
            height: 60px;
            background: rgba(23, 35, 34, 0.75);
            margin-right: 1px;
            -webkit-box-flex: 1;
            -webkit-flex: 1 0 auto;
            -moz-box-flex: 1;
            -ms-flex: 1 0 auto;
            flex: 1 0 auto;
            padding: 0;
        }
        .wadi_vimeo_video_headers {
            font-size: 10px;
        }
        .wadi_vimeo_video_title {
            max-width: 100%;
            font-size: 2em !important;
            font-weight: 700;
            margin: 0;
            padding: 0.1em 0.2em;
            background: rgba(23, 35, 34, 0.75);
            display: inline-block;
            text-transform: none;
            line-height: normal;
            letter-spacing: normal;
        }
        .wadi_vimeo_video_byline {
            font-size: 1.2em !important;
            font-weight: 400;
            color: #fff;
            margin-top: 0.1em;
            padding: 0.2em 0.5em;
            background: rgba(23, 35, 34, 0.75);
            text-transform: none;
            line-height: normal;
            letter-spacing: normal;
        }

        &.hide_vimeo_headers_wrap {
            display: none;
        }
    }
    .wadi_vimeo_video_portrait {
        img {
            width: 50px;
            height: 50px;
            margin: 5px;
            padding: 0;
            border: 0;
            -webkit-border-radius: 50%;
            border-radius: 50%;
        }
    }
    

    .wadi_video_thumb {
        // position: relative;
        cursor: pointer;
        // height: 100%;
        // width: 100%;
        // background: #ff0;
        // border-radius: 93px;
        height: 100%;
        // padding: 20px;
        position: absolute;
        width: 100%;

        img.wadi_video_thumbnail {
            object-fit: cover;
            height: 100%;
            width: 100%;
            // border: 20px solid;
            // border-radius: 93px;
        }
        
        .wadi_video_play_icon {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 50%;
            left: 50%;
            font-size: 40px;
        }
        .wadi_video_text {
            position: absolute;
            display: block;
            top: 30%;
            left: 50%;
            z-index: 10;
        }
    }

    /* border-radius: 30px; */
    // height: 100%;

    iframe.wadi_video_iframe {
        // border-radius: 30px;
        height: 100%;
        width: 100%;
        position: absolute;
        // border-radius: 93px;
        // border: 20px solid;

        // For Vimeo video

        background: #000;

        // padding: 20px;
        // background: yellow;
    }

    .wadi_self_hosted_video_container{ 
        &.show_video {

            // height: 100%;
            width: 100%;
            position: absolute;
            // border-radius: 93px;
            // padding: 20px;
            // background: yellow;
            // video.wadi_video_player {
            //     border-radius: 93px;
            //     border: 20px solid;
            // }
        }
    }

    .wadi_video_thumb {

        // background: #ff0; 
        cursor: pointer;
        // height: 100%;
        /* padding: 20px; */
        position: relative;
        width: 100%;

        video.wadi_video_thumbnail {
            width: 100%;
            // padding: 20px;
            // border: 20px solid;
            // border-radius: 93px;
        }
    }


}

.wadi_video_container  {
    
    .wadi_video_outer_container_sticky {
        z-index: 99;
        overflow: unset;

        .wadi_video_inner_wrapper {

            position: fixed !important;
            // z-index: 9999999;
            cursor: grab;
            height: 225px;
            width: 400px;
            // background: #656363; 
        }
    
        
        .wadi_close_sticky_container {
            display: block;
            position: absolute;
            top: -10px;
            right: -5px;
            padding: 7px;
            color: #000;
            background: #fff;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            cursor: pointer;
            z-index: 99999;
            height: 15px;
            width: 15px;
            line-height: 14px;
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            box-shadow: inset 2px -4px 8px 1px rgb(0 0 0 / 60%);
            -webkit-box-shadow: inset 2px -4px 8px 1px rgb(0 0 0 / 60%);
            -moz-box-shadow: inset 2px -4px 8px 1px rgb(0 0 0 / 60%);
            transition: all .2s ease-in-out;
            &:hover {
                transform: scale(1.3);
            }
        }
    }
    
    .wadi_video_wrapper {

        .wadi_video_inner_wrapper {
        z-index: 999999999;
        }


        // &::before{
        //     content: '';
        //     z-index: 2;
        //     height: 100%;
        //     width: 100%;
        //     position: absolute;
        //     top: 0;
        //     left: 0;
        // }
    
    }

}

.wadi-aspect-ratio-219 {
    
    .wadi_video_container  {
        
        .wadi_video_wrapper {

            padding-bottom: 42.8571%;
        
        }
    
    }
    
 }

  
  .wadi-aspect-ratio-169 {
    
    .wadi_video_container  {
        
        .wadi_video_wrapper {

            padding-bottom: 56.25%;
        
        }
    
    }
    
 }
  
  .wadi-aspect-ratio-43 {
    
    .wadi_video_container  {
        
        .wadi_video_wrapper {

            padding-bottom: 75%;
        
        }
    
    }
    
 }
  
  .wadi-aspect-ratio-32 {
    
    .wadi_video_container  {
        
        .wadi_video_wrapper {

            padding-bottom: 66.6666%;
        
        }
    
    }
    
 }
  
  .wadi-aspect-ratio-11 {
    
    .wadi_video_container  {
        
        .wadi_video_wrapper {

            padding-bottom: 100%;
        
        }
    
    }
    
 }
  
  .wadi-aspect-ratio-916 {
    
    .wadi_video_container  {
        
        .wadi_video_wrapper {

            padding-bottom: 177.8%;
        
        }
    
    }
    
 }

.wadi_video_sticky_top_left {
    
   .wadi_video_outer_container_sticky {
       
       .wadi_video_inner_wrapper {
           right: auto;
           left: 20px;
           top: 20px;
       }
   }
}
.wadi_video_sticky_bottom_left {
    
   .wadi_video_outer_container_sticky {

       .wadi_video_inner_wrapper {
        right: auto;
        left: 20px;
        bottom: 20px;
       }
   }
}
.wadi_video_sticky_top_right {
    
   .wadi_video_outer_container_sticky {

       .wadi_video_inner_wrapper {
        left: auto;
        right: 20px;
        top: 40px;
       }
   }
}
.wadi_video_sticky_bottom_right {
    
   .wadi_video_outer_container_sticky {

       .wadi_video_inner_wrapper {
        left: auto;
        right: 20px;
        bottom: 20px;
       }
   }
}
.wadi_video_sticky_center_left {
    
   .wadi_video_outer_container_sticky {

       .wadi_video_inner_wrapper {
        right: auto;
        left: 20px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
       }
   }
}
.wadi_video_sticky_center_right {
    
   .wadi_video_outer_container_sticky {

       .wadi_video_inner_wrapper {
        left: auto;
        right: 20px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
       }
   }
}