/* this will get overwritten on load */
body {
    display: none;
}

html.minimal-youtube,
html.minimal-youtube body {
    height: 100vh;
}

html.minimal-youtube .home-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: center;
    height: 100%;
}

html.minimal-youtube .search-input {
    padding: 8px;
    min-width: 250px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

html.minimal-youtube .search-btn {
    border: none;
    height: 40px;
    cursor: pointer;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    padding: 0 16px;
    transition: background 100ms ease-in-out;
}

html.minimal-youtube .search-icon-container {
    height: 24px;
    width: 24px;
}

@media (prefers-color-scheme: dark) {
    html.minimal-youtube .logo {
        color: white;
        fill: white;
    }

    html.minimal-youtube .search-input {
        border: 1px solid rgb(48, 48, 48) !important;
        background: rgb(18, 18, 18) !important;
        color: white;
    }

    html.minimal-youtube .search-btn {
        background: rgba(255, 255, 255, 0.08);
    }

    html.minimal-youtube .search-icon-container {
        color: white;
        fill: white;
    }
}

@media (prefers-color-scheme: light) {
    html.minimal-youtube .search-input {
        border: 1px solid rgb(204, 204, 204);
    }

    html.minimal-youtube .search-btn {
        background: rgb(248, 248, 248);
        border: 1px solid rgb(211, 211, 211);
        border-left: none;
    }

    html.minimal-youtube .search-btn:hover {
        background: rgb(240, 240, 240);
        border: 1px solid rgb(198, 198, 198);
        border-left: none;
    }
}

html.minimal-youtube .logo {
    width: 200px;
}

html.minimal-youtube .search-input:focus {
    outline: none;
    border: 1px solid rgb(28, 98, 185);
}

html.minimal-youtube .search-group {
    height: 40px;
    display: flex;
}

html.minimal-youtube #columns {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

html.minimal-youtube #columns #secondary {
    display: none;
}

/* code to show playlist panel when it is a video from a playlist */
html.minimal-youtube #columns #secondary #secondary-inner > * {
    display: none;
}

html.minimal-youtube #columns #secondary #secondary-inner > #playlist {
    display: block;
}

html.minimal-youtube
    #columns
    #secondary:has(ytd-playlist-panel-video-renderer) {
    display: flex;
}

html.minimal-youtube
    #columns.ytd-watch-flexy:has(ytd-playlist-panel-video-renderer) {
    align-items: flex-start;
}

html.minimal-youtube #columns #primary {
    max-width: fit-content;
}

html.minimal-youtube #top-level-buttons-computed,
html.minimal-youtube #voice-search-button,
html.minimal-youtube ytd-mini-guide-renderer,
html.minimal-youtube #related,
html.minimal-youtube tp-yt-app-drawer,
html.minimal-youtube .ytd-masthead #buttons,
html.minimal-youtube #guide-button,
html.minimal-youtube [class="style-scope ytd-comments"] {
    display: none !important;
}

html.minimal-youtube ytd-notification-topbar-button-renderer {
    display: none !important;
}

html.minimal-youtube ytd-topbar-menu-button-renderer #button {
    display: none !important;
}

html.minimal-youtube ytd-topbar-menu-button-renderer {
    display: flex !important;
    filter: grayscale(100%);
}

html.minimal-youtube #img {
    filter: grayscale(100%);
}

html.minimal-youtube ytd-video-owner-renderer #img {
    filter: grayscale(0%);
}

html.minimal-youtube #avatar-btn {
    display: flex !important;
}

html.minimal-youtube #primary {
    max-width: 900px !important;
    width: 80% !important;
}

html.minimal-youtube .ytp-chrome-bottom {
    width: calc(98%) !important;
}

html.minimal-youtube ytd-app[mini-guide-visible] ytd-page-manager.ytd-app {
    margin-left: 0 !important;
}

html.minimal-youtube
    ytd-watch-flexy:not([theater]):not([fullscreen])
    .html5-video-container,
html.minimal-youtube ytd-watch-flexy:not([theater]):not([fullscreen]) video {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
}

html.minimal-youtube ytd-playlist-sidebar-renderer {
    left: 0 !important;
}

html.minimal-youtube ytd-reel-shelf-renderer {
    display: none;
}

html.minimal-youtube .left-arrow .right-arrow {
    display: block;
}

ytd-app[guide-persistent-and-visible] ytd-page-manager.ytd-app {
    margin-left: 0 !important;
}

#page-manager > ytd-browse {
    width: 50% !important;
    margin: 0 auto !important;
}
