/* ==UserStyle==
@name           YouTube - Fullscreen Theater
@description    Displays YouTube's theater in fullscreen.
@version        2025.11.26.10.24
@author         MetalTxus
@namespace      https://github.com/jesuscc1993/
@license        CC BY-SA 4.0
@preprocessor   stylus

@var checkbox   hide-header     "Auto-hide header"  1
@var checkbox   hide-scrollbar  "Hide scrollbar"    0

==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com/watch?v=")
{
  :root {
    --header-height: 56px;
    --player-height: calc(100vh - var(--header-height));
  }

  ytd-watch-flexy:not([fullscreen]) {
    &[full-bleed-player],
    &[full-bleed-player][respect-aspect-ratio],
    &[theater] {
      #full-bleed-container.ytd-watch-flexy,
      #player-full-bleed-container.ytd-watch-flexy,
      #player-wide-container.ytd-watch-flexy {
        height: var(--player-height);
        max-height: none;
      }
    }
  }

  #background.ytd-masthead {
    opacity: 1 !important;
  }

  if (hide-header) {
    :root {
      --player-height: 100vh;
    }

    #page-manager.ytd-app {
      margin-top: 0;
    }

    #masthead-container.ytd-app {
      top: calc(-1 * var(--header-height));
      transition: 150ms;
      transition-delay: 150ms;
      border-bottom: var(--header-height) solid transparent;
    }

    #masthead-container.ytd-app:focus-within,
    #masthead-container.ytd-app:hover {
      top: 0;
      border-bottom: 0px solid transparent;
    }
  }

  if (hide-scrollbar) {
    ::-webkit-scrollbar {
      display: none;
    }

    * {
      scrollbar-width: none;
    }
  }
}