/* ==UserStyle==
@name           gruvbox youtube
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
@preprocessor   stylus
==/UserStyle== */
@-moz-document domain("youtube.com") {

    :root {
        --bg0: #1d2021;
        --bg1: #222222;
        --bg2: #282828;
        --bg3: #504945;
        --bg4: #202020;
        --fg0: #ebdbb2;
        --fg1: #fbf1c7;
        --fg2: #d5c4a1;
        --fg3: #a89984;
        --col_blue: #83a598;
        --col_accent: #fb4934;
        --col_accent_dark: #cc241d;
        --col_yellow: #fabd2f;
        --col_red: #fb4934;

        --monospaced: "Jetbrains Mono";
        --monospaced-size: 14px;
        --monospaced-small: cozette;
    }

    ytd-app,
    ytd-mini-guide-renderer,
    ytd-mini-guide-renderer #items > *,
    ytd-masthead {
        background-color: var(--bg2) !important;
    }
    
    ytd-browse {
        background-color: var(--bg1) !important;
        #contentContainer #channel-header {
            background-color: var(--bg1) !important;
        }
        #tabs-inner-container {
            background-color: var(--bg1) !important;
        }
    }
    

    yt-icon {
        color: var(--fg1) !important;
    }
   

    ytd-mini-guide-renderer {
        a#endpoint[aria-selected="true"] > * {
            filter: none;
            color: var(--col_accent) !important;
        }
    }
    
    
    
    div, span, h1, h2, ytd-channel-name *, yt-formatted-string, #video-title {
        color: var(--fg1) !important;
    }
    
    .ytp-time-display * {
        color: white !important;
    }


    ytd-rich-grid-video-renderer {
        #details #meta {
            yt-formatted-string#video-title {
                color: var(--fg1) !important;
            }
            ytd-video-meta-block * {
                color: var(--fg3);
            }
        }
    }
    ytd-topbar-logo-renderer {
        svg {
            g:first-child {
                & > g:first-child > :first-child {
                    fill: var(--col_accent_dark) !important;
                }
            }
            g:last-child {
                * {
                    fill: var(--fg1) !important;
                }
            }
        }
        #country-code {
            color: var(--fg1) !important;
        }
    }

    ytd-searchbox {
        #search-form {
            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
            & > * {
                background-color: var(--bg0) !important;
            }

            & * {
                border: none !important;
                box-shadow: none !important;
            }

            input {
                color: var(--fg1) !important;
            }
        }
    }

    .gstl_50.sbdd_a {
        overflow: visible !important;
        box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.3) !important;
        * {
            border: none;

            color: var(--fg1);
            background-color: var(--bg2);
        }
    }
    
    .ytp-progress-bar-container {
        .ytp-play-progress {
            background-color: var(--col_accent_dark);
        }
    }
    
    .toggle-container {
        #toggleButton {
            background-color: var(--col_accent);
        }
    }
}