@import './functionMain';

body{
  transition: all .35s linear;
  overflow-x: hidden;
  .right{
    height: 80%;
    flex: .7;
    position: relative;
    top: 80px !important;
    width: 75%;
    left:15%;
    transition: all .35s ease-in-out;
    @media screen and (min-width:768px ) and (max-width:992px){
      width: 100% !important;
      left: 10px !important;
    }
    h1{
      overflow-x: hidden;
      @media screen and (max-width: 767px) {
        left: -25px !important;
      }
      position: relative;
      left:20%;
      font-size: 30px;
    }
    .RecomendedVideos-list{    
      @media screen and (max-width:767px){
        overflow-x: hidden;
        position: relative;
        width: 125% !important;
        left: -35% !important;
        .container-element{
          .video-component{       
            position: relative;
            width: 100% !important;  
              margin-block: 10px !important;
              .right-video-display{
               height: 100%;
               width: fit-content !important;
              }
             .left-video-info{
              position: relative !important;
              left: -40px !important;
             .related-components{
              li{
                i{
                  height: 30px !important;
                  width: 30px !important;
                  padding: 10px;
                }
              }
             }
             }
            }
        }
       }
      height: 70vh;
      overflow-y: scroll;
      -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
      display: grid;
      place-items: center;
      width: 90vw;
      margin-left: 0%;
      .container-element{
         position: relative;
          scroll-snap-align: end;
          margin-block: 10px;
          list-style: none;
          display: grid;
          gap: 10px;
          height: 70vh;
          grid-template-columns: 100%;
          place-items:center;
          width: 100%;
          .User{         
            @media screen and (max-width:767px){
              flex-direction: column !important;
              .left-container{
                background-color: transparent !important;
                backdrop-filter: none !important;
                box-shadow: none !important;
                border: none !important;
                margin-left: 10%;
                height:560px !important;
                position: absolute;
                width: 90% !important;
                .Icon-User{
                  margin-top: 10% !important;
                  img{
                    height: 30px !important;
                    width: auto;
                  }
                }
                .Info-User{
                  display: none !important;
                }
                .left-video-info{
                 .related-components{
                  z-index: 50;
                  flex-direction: column !important;
                  position: absolute;
                  top: -380px !important;
                  right: 0px;
                 }
                }
              }
              .video-component{       
                video{
                  margin-left: 18.5%;
                  height: 400px !important;
                  width: 250px !important;
                }
              }
            }
            overflow-x: hidden;
            width: 100%;
            height: 100%;
            @include MakeFlex();
            justify-content: center;
            gap: 15px;
            .left-container{
              @include MakeGlassMorphism();
              height: 420px;
              width: 20%;
               .Icon-User , .Info-User{
                margin-inline: 5%;
               }
              .Icon-User{
                margin-block-start: 20%;
                @include MakeFlex();
                flex-wrap: wrap;
                gap: 10px;
                .icon-of-user{
                  height: 75px;
                  width: auto;
                  border-radius: 50%;
                }
                h2{
                  font-size: 13px;
                }
              }
              .left-video-info{
                width: 100%;
                z-index: 10;
                position: absolute;
                bottom: 0px;
                .related-components{
                  @include MakeFlex();
                  justify-content: space-around;
                  flex-direction:row ;
                  padding: 0;
                  .element-sharing{               
                   // cursor: pointer;
                    list-style: none;
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    font-size: 15px;
                    transition : all .35s linear ; 
                    svg,i{
                      z-index:20;
                      height: 50px;
                      width: 50px;
                      border-radius: 50%;
                      background: rgba( 255, 255, 255, 0.15 );
                      box-shadow: 0 8px 32px 0 rgba( 0, 0, 0, 0.5 );
                      backdrop-filter: blur( 4px );
                      -webkit-backdrop-filter: blur( 4px );
                      @include MakeFlex();
                      justify-content: center;
                     
                      
                    }
                   
                  }
                }
              }
            }
            .video-component{
              width: 40%;
              .right-video-display{
                   video{
                   // display: none;
                  box-shadow: 0px 5px 20px black; 
                  border-radius:$Borders;
                  height: 420px;
                  width: 100%;
                  &:focus{
                    border: none;
                    outline: none;
                  }
                }
              }
             }
          }
      }
     hr{
      border: none;
      width: 50%;
    }
    }
  }
}
