/* ==UserStyle==
@name           YouTube Live Borderless
@version        0.1.12
@namespace      github.com/cyfung1031
@license        MIT
@description    Make YouTube Live Borderless
@author         CY Fung
@supportURL     https://github.com/cyfung1031/YouTube-Live-Borderless/
@preprocessor   stylus
@var checkbox   apply-to-live-chat-only         "Apply to Live Chat Only"                       1
@var checkbox   no-masthead                     "Hide Top Masthead Bar"                         0
@var range      masthead-hoverable-height       "Height of Invisible MastHead Bar"              [0, 0, 12, 2, "px"]
@var range      chrome-bottom-bar-margin        "Chrome Bottom Bar Margin"                      [12, 6, 48, 6, "px"]
@var range      primary-content-margin          "Primary Content Margin"                        [24, 6, 48, 6, "px"]
@var checkbox   no-bottom-row                   "Hide Primary MetaInfo Bottom Row"              0
@var range      video-title-size                "Video Title Size"                              [2.0, 1.0, 3.0, 0.2, "rem"]
@var number     side-panel-width                "Side Panel Width"                              [440, 320, 640, 20, "px"]
@downloadURL none
==/UserStyle== */

@-moz-document url-prefix("https://www.youtube.com/watch?v=") 

    
    contentf(){
        
        
        #columns.ytd-watch-flexy > #secondary.ytd-watch-flexy {
            width: side-panel-width;
        }
        
        &:not([tabview-loaded]){
            
            #primary-inner.ytd-watch-flexy ytd-comments#comments.ytd-watch-flexy, 
            #secondary-inner.ytd-watch-flexy > #related.ytd-watch-flexy {
                display:none !important;
            }

            #player-theater-container{
                max-height: calc(100vh - 100px) !important;
            }
            #cinematics{
                // contain: layout;
                contain: layout size style;
                user-select: none;
                touch-action: none;
                pointer-events: none;
            }
        }

        
        if no-masthead {

            
            
            &,
            ytd-app,
            ytd-page-manager[class].style-scope,
            ytd-watch-flexy[class].style-scope {
                /* 0px not 0 */
                --ytd-masthead-height: 0px;
                --ytd-toolbar-height: 0px;
                --ytd-watch-flexy-masthead-height: 0px;
            }
            
            #masthead-container {
                opacity: 0 !important;
                transition: opacity 300ms;
                min-height: masthead-hoverable-height;
            }
            #masthead-container:not(:hover) > ytd-masthead {
                display: none !important;
            }
            if masthead-hoverable-height > 0 {

                #masthead-container:hover {
                    opacity: 1 !important;
                }

                #masthead-container::after {
                    content: '';
                    display: flex;
                    width: 100%;
                    height: masthead-hoverable-height;
                    top: 0;
                    z-index: 99999;
                }
                
            }
            

            ytd-watch-flexy.style-scope[is-two-columns_]:not([fullscreen]):not([theater]) {

                #columns.style-scope.ytd-watch-flexy,
                #primary.style-scope.ytd-watch-flexy,
                #primary-inner.style-scope.ytd-watch-flexy,
                #secondary.style-scope.ytd-watch-flexy,
                #secondary-inner.style-scope.ytd-watch-flexy {
                    height: 100vh;
                    max-height: 100%;
                }
                
            }
            

            ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) {

                height:100vh; 
                #player-theater-container.ytd-watch-flexy {
                    flex: 77;
                    max-height: unset;
                }
                #player-theater-container.ytd-watch-flexy ~ #columns.style-scope.ytd-watch-flexy {
                    overflow: visible;
                }
                
            }
            
            
        }

        if no-bottom-row {
            
            #bottom-row.ytd-watch-metadata {
                display: none !important;
            }
            
        }

        h1.ytd-watch-metadata {
            font-size: video-title-size;
            --font-size: video-title-size;
            line-height: calc(var(--font-size) * 1.4);
        }

        ytd-watch-flexy.style-scope:not([fullscreen]) {

            & {
                --ytd-margin-2y: var(--ytd-margin-2x);
                --ytd-margin-4y: var(--ytd-margin-4x);
                --ytd-margin-6y: var(--ytd-margin-6x);
                --ytd-margin-8y: var(--ytd-margin-8x);
            }
            #columns.style-scope.ytd-watch-flexy {
                --ytd-margin-2x: 0;
                --ytd-margin-4x: 0;
                --ytd-margin-6x: 0;
                --ytd-margin-8x: 0;
            }
            .style-scope.ytd-watch-flexy > :not(.ytd-watch-flexy) {
                --ytd-margin-2x: var(--ytd-margin-2y);
                --ytd-margin-4x: var(--ytd-margin-4y);
                --ytd-margin-6x: var(--ytd-margin-6y);
                --ytd-margin-8x: var(--ytd-margin-8y);
            }
            #secondary-inner.style-scope.ytd-watch-flexy {
                display: flex;
                flex-direction: column;
                height: 100%;
            }
            #movie_player {
                position: relative;

                > .html5-video-container:has(video) {

                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    position: absolute;
                }
                .ytp-chrome-bottom[style*="width"] {
                    width: unset !important;
                    left: chrome-bottom-bar-margin !important;
                    right: chrome-bottom-bar-margin !important;
                }
                .html5-video-container > video {
                    width: unset !important;
                    height: 100% !important;
                    left: 0 !important;
                    right: 0 !important;
                    max-height: 100%;
                    max-width: 100%;
                    margin: 0 auto;
                }
                .ytp-iv-video-content {
                    width: 100% !important;
                    height: 100% !important;
                }
                .ytp-chapter-hover-container[style*="width"] {
                    width: 100% !important;
                }
            }
            #chat:not([collapsed]) {
                flex: 77;
            }
            #right-tabs {
                display: flex;
                margin: 0 !important;
                flex: 1;
                flex-direction: column;

                #material-tabs,
                .tab-content {
                    outline: 0;
                }

                .tab-content {
                    flex: 77;
                }
            }
            #primary-inner > *:not(#player) {
                padding: 0 primary-content-margin 0;
            }
            h1.style-scope.ytd-watch-metadata {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                align-items: center;
            }
            #player-container-outer.ytd-watch-flexy {
                max-width: unset;
            }
            
        }

        
        body.lock-scrollbar[style*="overflow"][style*="hidden"]:has(ytd-watch-flexy[is-two-columns_] #columns.ytd-watch-flexy #primary-inner.ytd-watch-flexy #player #movie_player video[src]){
            overflow-y: unset !important;
        }
        
    }
    
    if apply-to-live-chat-only 
        html:has(iframe#chatframe)
            contentf()
    else
        html
            contentf()