[data-ui="track-list"] {
    position: absolute;
    box-sizing: border-box;
    right: 2rem; top: 6rem; width: 31.4rem;
    border: 0.1rem solid var(--color-gold);
    backdrop-filter: blur(15px);
    padding: 0;
    background-color: rgba(0,0,0,0.3);
    background-color: rgba(255, 255, 255, 0.01);
    
    transition: opacity var(--transition-duration), transform var(--transition-duration);
    opacity: 0;
    transform: scaleY(0.8);
    transform-origin: top;
    pointer-events: none;

    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);

    will-change: transform, opacity;
    backface-visibility: hidden;
}
[data-ui="track-list"] my-btn { pointer-events: none; }

[data-ui="vr-app"].tracks-open [data-ui="track-list"] {
    opacity: 1;
    transform: scaleY(1);
    pointer-events: all;
}
[data-ui="vr-app"].tracks-open [data-ui="track-list"] my-btn { pointer-events: all; z-index: 100; }


[data-ui="track-list"] .row {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%; height: 4rem;
    
}

[data-ui="track-list"] .row.album {
    display: flex;
    justify-content: center;
    align-items: end;
    width: 100%; height: 6rem;
    font-size: 1.7rem;
    line-height: 2.2rem;
    color: white;
    background-color: var(--color-gold);
    background-color:rgba(160,110,71,0.75);
    backdrop-filter: blur(10px);
    text-align: center;

    will-change: transform, opacity;
    backface-visibility: hidden;
}

[data-ui="track-list"] .row my-btn {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-items: center;
    cursor: pointer;
    transition: background-color var(--transition-duration);
}

[data-ui="track-list"] .row my-btn.active,
[data-ui="track-list"] .row my-btn:hover {
    background-color: rgba(255,255,255,0.1);
}

[data-ui="track-list"] .row my-btn svg {
    position: absolute;
    right: 0.0rem;
    opacity: 0;
    transition: opacity var(--transition-duration);
}

main.audio-on [data-ui="track-list"] .row my-btn.active svg {
    opacity: 1;
}

[data-ui="track-list"] .row my-btn .caption {
    width: 100%;
    font-family: National;
    letter-spacing: 2%;
    font-size: 1.6rem;
    color: white;
    padding: 0 2rem;
    text-align: left;
}

[data-ui="track-list"] .row.album .caption {
    box-sizing: border-box;
    font-family: 'Playfair Display Regular', Arial, Helvetica, sans-serif;
    font-size: 1.8rem;
    height: 100%;
    display: flex;
    align-items: center;
    transform: scaleX(0.95);
    /* padding-right: 1.0rem; */
}

[data-ui="track-list"] my-btn[data-role="switcher-audio"] { cursor: pointer; position: absolute; left: auto; right: 1rem; top: 3.5rem; width: 4rem; height: 4rem; transform: translateY(-50%); z-index: 100; }
my-btn[data-role="switcher-audio"]:hover { background-color: rgba(255, 255, 255, 0.15); }
my-btn[data-role="switcher-audio"] svg .off,
my-btn[data-role="switcher-audio"] svg .on { opacity: 0; transition: opacity var(--transition-duration); }

main:not(.audio-on) my-btn[data-role="switcher-audio"] svg .off,
main.audio-on my-btn[data-role="switcher-audio"] svg .on { opacity: 1; }



main:not(.autorot) .state[data-st="hs-auto-rot-off"],
main.autorot .state[data-st="hs-auto-rot-on"],
main:not(.hs-title-auto) .state[data-st="hs-title-auto-off"],
main.hs-title-auto .state[data-st="hs-title-auto-on"] {
    display: block!important
}



@media screen and (max-width: 500px) {
    
    [data-ui="track-list"]  {
        left: 0; top: auto; bottom: 10rem; width: 100%;
        padding: 0rem 0rem 2rem 0; border: 0;
        background-color: rgba(0,0,0,0.1);
        transform-origin: bottom;
        pointer-events: none;
        transition: transform var(--transition-duration), bottom var(--transition-duration), opacity var(--transition-duration);
    }

    [data-ui="track-list"] [data-role="switcher-audio"] {
        left: auto; right: 1rem; top: 3.5rem; transform: translateY(-50%);
        z-index: 100;
    }

    [data-ui="track-list"] .row:not(.album) {
        padding: 0 4rem;
    }

    [data-ui="track-list"] .row my-btn {
        width: calc(100% - 8rem);
    }

    [data-ui="track-list"] .row.album {
        height: 7rem;
        margin-bottom: 2rem;
    }

    main.tracks-open [data-ui="track-list"] {
        bottom: 0;
    }

    main.tracks-open [data-ui="track-list"] my-btn { pointer-events: all; }




}