.artplayer-video-player {
    .artplayer-playlist {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 120;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        overflow: hidden;

        .artplayer-playlist-inner {
            position: absolute;
            top: 0;
            right: -300px;
            bottom: 0;
            width: 300px;
            height: 100%;
            font-size: 12px;
            background: rgba(0, 0, 0, 0.8);
            transition: all 0.2s ease-in-out;
            overflow: auto;

            .artplayer-playlist-item {
                cursor: pointer;
                border-bottom: 1px solid rgba(255,255,255,.1);
                padding: 12px 20px 12px 20px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;

                &:hover, &.active {
                    color: #00a1d6;
                    background: rgba(255, 255, 255, 0.1);
                }
            }
        }
    }

    &.artplayer-playlist-show {
        .artplayer-playlist {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            .artplayer-playlist-inner {
                right: 0;
            }
        }
    }
}