YouTube Stylesheet - Large "Show less" Button [Experimental]

/* ==UserStyle==
@name           YouTube - Large "Show less" Button [Experimental]
@namespace      lednerg
@version        22.11.8
@description    Turns the right half of video descriptions into a large "Show less" button.
@author         lednerg
==/UserStyle== */

/*  I got tired of scrolling down to find the "Show less" button in descriptions,
    so I made this. It lets you collapse the description box by clicking the right
    half of it. The button itself becomes visible when hovering over it. Any
    links within this area will be clickable, any text will remain selectable.
    This script doesn't play well with the "Show Full View Count and Date" script. */

@-moz-document domain("youtube.com") {
    /* "Show more" text */
    ytd-watch-metadata[description-collapsed] tp-yt-paper-button#expand {
        opacity: 0.2;
        transition: opacity .5s;
    }
    /* "Show more" text when hovered */
    ytd-watch-metadata[description-collapsed] #description:hover tp-yt-paper-button#expand {
        opacity: 1;
        transition: opacity .125s;
    }
    /* Puts some space before the "Show more" text */
    ytd-watch-metadata[description-collapsed] tp-yt-paper-button#expand:before {
        content: "   "
    }
    /* "Show less" button location, size, coloring, etc */
    ytd-watch-metadata:not([description-collapsed]) tp-yt-paper-button#collapse {
        color: transparent !important; /* hides original "Show less" text */
        position: absolute !important;
        bottom: 0% !important;
        right: 0% !important;
        height: 100%;
        width: 50%;
        opacity: 0.2;
        transition: opacity .5s;
        z-index: 0;
        border-radius: 0;
    }
    /* "Show less" button when hovered */
    ytd-watch-metadata:not([description-collapsed]) tp-yt-paper-button#collapse:hover {
        background: linear-gradient(90deg, #9990 0%, #9992 22%, #9993 45%, #9993 55%, #9992 78%, #9990 100%);
        transition: opacity .125s;
        opacity: 1;
    }
    /* "Show less" text */
    ytd-watch-metadata:not([description-collapsed]) tp-yt-paper-button#collapse:before {
        color: #fff !important;
        content: "Show less";
        position: absolute;
        bottom: 0;
        text-align: center;
        width: 100%;
    }
    /* "Show less" text when hovered */
    ytd-watch-metadata:not([description-collapsed]) tp-yt-paper-button#collapse:hover:before {
        opacity: 1 !important;
        transition: opacity .25s;
    }
    /* Allows links, Chapters, Key Moments, etc to be clicked under "Show less" button*/
    ytd-watch-metadata:not([description-collapsed]) #description a,
    ytd-watch-metadata:not([description-collapsed]) #description span,
    ytd-watch-metadata:not([description-collapsed]) #description .yt-formatted-string,
    ytd-watch-metadata:not([description-collapsed]) div[slot="extra-content"] * {
        position: relative !important;
        z-index: 1 !important;
    }
    /* Move "Show less" down while open so it doesn't collide with text. */
    ytd-watch-metadata:not([description-collapsed]) ytd-text-inline-expander {
        min-height: 20px;
        padding-bottom: 20px;
        /* retrying the thing that was glitchy but in this element */
        margin-top: -20px;
        padding-top: 20px;
    }
}