YouTube Stylesheet - Large "Show less" Button

/* ==UserStyle==
@name           YouTube - Large "Show less" Button
@namespace      lednerg
@version        23.7.27
@description    Turns the right half of the description box into a large "Show less" button.
@author         lednerg
==/UserStyle== */

/*  I got tired of having to scroll down to find the "Show less" button, 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 on top of the button will remain clickable, text will be selectable. */

@-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;
        margin-top: -20px;
        padding-top: 20px;
    }
}