/* ==UserStyle==
@name 「YouTube Black Edition」
@namespace BillyCool
@version 1.2.1
@description A pitch black userstyle for YouTube with a number of small tweaks and improvements.
@author BillyCool
@homepageURL https://github.com/BillyCool/UserStyles/tree/master/YouTube-Black-Edition
@updateURL https://github.com/BillyCool/UserStyles/raw/master/YouTube-Black-Edition/youtube-black-edition.user.css
@license GPL-3.0-or-later
@preprocessor stylus

@var color bg-1 "Background color" #000
@var range max-grid-size "Maximum grid size" [6, 6, 16, 1]
@var checkbox unround-thumbnails "Unround video thumbnails" 0
@var checkbox hide-prev-next "Hide replay and next buttons in video player" 0
@var checkbox hide-watch-later "Hide watch later button" 0
@var checkbox hide-add-queue "Hide add to queue button" 0
@var checkbox hide-products "Hide featured products in video player" 0
@var checkbox hide-merch "Hide merch in video descriptions" 0
@var checkbox hide-join "Hide join button below video player" 0
@var checkbox hide-bell "Hide bell button below video player" 0
@var checkbox hide-clip "Hide clip button below video player" 0
@var checkbox hide-share "Hide share button below video player" 0
@var checkbox hide-save "Hide save button below video player" 0
@var checkbox hide-thanks "Hide thanks button below video player" 0
@var checkbox hover-block "[Youtube Blocker] Show block icon on hover only" 1
==/UserStyle== */
@-moz-document domain("youtube.com") {
    /* Variable declarations */
    bg-2 = lighten(bg-1, 5%);
    bg-3 = lighten(bg-1, 8%);
    bg-4 = lighten(bg-1, 12%);
    bg-5 = lighten(bg-1, 16%);
    
    html[dark], [dark] {
        --yt-spec-base-background: bg-1;
        --yt-spec-general-background-a: bg-3;
        --yt-spec-menu-background: bg-2;
        --yt-spec-mono-tonal-hover: bg-4;
        --yt-spec-badge-chip-background: bg-3;
        --yt-spec-button-chip-background-hover: bg-4;
        --yt-spec-additive-background: bg-3;
        --yt-spec-static-overlay-button-secondary: bg-4;
        --ytd-searchbox-background: bg-1;
        --ytd-searchbox-legacy-button-color: bg-3;
        --ytd-searchbox-legacy-button-hover-color: bg-4;
        --ytd-grid-max-width: calc(100% - 160px);
        --ytd-grid-6-columns-width: (1284 / 6 * max-grid-size)px; /* var(--ytd-grid-6-columns-width) == 1284px */
        --paper-tooltip-background: bg-4;
    }
    
    if (unround-thumbnails) {
        ytd-thumbnail a.ytd-thumbnail, ytd-thumbnail::before, {
            border-radius: 0px !important;
        }
    }

    if (hide-prev-next) {
        .ytp-prev-button, .ytp-next-button {
            display: none !important;
        }
    }

    if (hide-watch-later) {
        #hover-overlays .ytd-thumbnail[aria-label="Watch later"] {
            display: none !important;
        }
    }

    if (hide-add-queue) {
        #hover-overlays .ytd-thumbnail[aria-label="Add to queue"] {
            display: none !important;
        }
    }
    
    if (hide-products) {
        #player-container .ytp-suggested-action {
            display: none !important;
        }
    }

    if (hide-merch) {
        ytd-merch-shelf-renderer,
        #merch-shelf /* Compatibility */ {
            display: none !important;
        }
    }

    if (hide-join) {
        #sponsor-button {
            display: none !important;
        }
    }

    if (hide-bell) {
        #notification-preference-button {
            display: none !important;
        }
    }
    
    if (hide-clip) {
        ytd-button-renderer:has(button[aria-label="Clip"]) {
            display: none !important;
        }
    }
    
    if (hide-share) {
        ytd-button-renderer:has(button[aria-label="Share"]) {
            display: none !important;
        }
    }
    
    if (hide-save) {
        ytd-button-renderer:has(button[aria-label="Save to playlist"]) {
            display: none !important;
        }
    }
    
    if (hide-thanks) {
        ytd-button-renderer:has(button[aria-label="Thanks"]) {
            display: none !important;
        }
    }

    if (hover-block) {
        ytd-thumbnail {
            .ytbck-quickblock {
                display: none !important;

                ~/:hover ^[1..-1] {
                    display: block !important;
                    background: var(--yt-spec-general-background-a) !important;
                }
            }
        }
    }
}