#content, .page, :root {
    .wp-generator-container {
        #playlist-button.btn {
            margin           : 10px auto;
            background-color : var(--col-base);
            align-items      : center;
            align-content    : center;
            border           : 1px solid currentColor;
            border-radius    : 4px;
            cursor           : pointer;
            display          : flex;
            padding-inline   : 1em;
            text-align       : center;
            text-decoration  : none;
            transition       : all 0.2s;
            line-height      : 1.3;
            width            : max-content;
            padding-block    : 5px !important;

            &:hover {
                background-color : var(--col-lightest);
                background-image : none;
                border           : 1px solid var(--col-base);
                color            : var(--col-base);
                padding-inline   : 0.8em 1.2em;
            }
        }

        #playlist {
            background-color : #DDD;
            box-shadow       : 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius    : 8px;
            position         : relative;

            &::before {
                content        : "";
                box-shadow     : inset 0 0 5px #111;
                position       : absolute;
                inset          : 0;
                right          : 8px;
                top            : 38px;
                z-index        : 100;
                pointer-events : none;
            }

            .playlist-name {
                background-color : #282828;
                color            : #fff;
                padding          : 10px;
                margin           : 0;
                font-size        : 18px;
                text-align       : center;
                text-transform   : capitalize;
                margin           : 0 !important;

                &::before {
                    content : "More videos from the '";
                }

                &::after {
                    content : "' playlist";
                }
            }

            .playlist-items {
                list-style : none;
                padding    : 0;
                margin     : 0;
                overflow   : hidden auto;
                height     : 500px;

                &::-webkit-scrollbar {
                    width   : 8px;
                    z-index : 10;
                }

                &::-webkit-scrollbar-track {
                    background : #f1f1f1;
                }

                &::-webkit-scrollbar-thumb {
                    background    : #888;
                    border-radius : 10px;

                    &:hover {
                        background : #555;
                    }
                }

                .playlist-item {
                    padding : 0;
                    margin  : 0;

                    .video-wrapper:hover, &.selected .video-wrapper {
                        background-color : #f0f0f0;
                        color            : #d81b60;
                    }
                    
                    &.selected .video-wrapper {
                        outline        : solid 2px red;
                        outline-offset : -2px;
                        
                        .video-index {
                            font-weight : bold;
                        }
                    }
                    .video-wrapper {
                        border-bottom         : 1px solid #eee;
                        transition            : background-color 0.3s;
                        padding               : 10px;
                        color                 : #333;
                        font-size             : 14px;
                        display               : grid;
                        grid-template-columns : 2ch clamp(5em, 10%, 15em) 2fr;
                        gap                   : min(2%, 1ch);
                        align-items           : center;


                        &:last-child {
                            border-bottom : none;
                        }

                        .video-info {
                            width : fit-content;

                            a {
                                color : inherit;
                            }

                            .video-title {
                                font-size : 108%;
                            }

                            .video-meta> :not(:first-child)::before {
                                content       : "•";
                                margin-inline : 1ch;
                            }
                        }

                        .video-thumbnail {
                            position : relative;

                            .video-duration {
                                background-color : #000c;
                                color            : white;
                                padding          : 0 5px;
                                border-radius    : 3px;
                                position         : absolute;
                                bottom           : .8ch;
                                right            : 2%;
                                font-size        : .75em;
                            }
                        }
                    }
                }
            }
        }
    }
}