@property --custom-spotify-bar {
    syntax: 'off | on';
    inherits: false;
    initial-value: on;
}

@container body style(--custom-spotify-bar: on) {
    /* text-like spotify progress bar */
    #vc-spotify-progress-bar {
        margin: 8px 0 0 0;
    }
    .vc-spotify-button-row {
        margin-top: 8px;
    }
    #app-mount #vc-spotify-progress-bar .bar_a562c8 {
        height: 22px !important;
        top: 0 !important;
        background-color: var(--background-surface-high);
    }
    #app-mount #vc-spotify-progress-bar .track_a562c8:hover {
        cursor: col-resize;
    }
    #app-mount #vc-spotify-progress-bar .barFill_a562c8 {
        height: 22px !important;
    }
    #vc-spotify-progress-bar .vc-spotify-time-left,
    #vc-spotify-progress-bar .vc-spotify-time-right {
        z-index: 1;
        top: 0;
        margin-top: 0;
        mix-blend-mode: difference;
        font-size: 16px;
        line-height: 22px;
        pointer-events: none;
    }
    #vc-spotify-progress-bar .vc-spotify-time-left {
        left: 6px;
    }
    #vc-spotify-progress-bar .vc-spotify-time-right {
        right: 6px;
    }
    #vc-spotify-progress-bar .grabber_a562c8 {
        visibility: hidden;
    }
}
