[data-ui="top-btns"] {
    position: absolute;
    top: 1rem;
    display: flex;
    flex-direction: row;
    /* z-index: 80; */
}

[data-ui="top-btns"] > my-btn,
[data-ui="settings"] my-btn {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* border: 0.1rem solid var(--color-gold); */
    border-radius: var(--btn-border-radius);
    min-width: 0rem; height: 4rem;
    background-color: rgba(0,0,0,0.3);
    background-color: rgba(255, 255, 255, 0.01);
    cursor: pointer;
    transition: background-color var(--transition-duration), box-shadow 0.3s;
    /* box-shadow: 0 0 5px rgba(255, 255, 255, 0.0); */
    cursor: pointer;
    pointer-events: all;
    padding-left: 2rem;

    font-family: 'Playfair Display Regular', Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    color: white;
    letter-spacing: 3%;
    text-align: center;
}

[data-ui="top-btns"] > my-btn,
[data-ui="settings"] > my-btn {
    border: 0.1rem solid var(--color-gold);
    backdrop-filter: blur(10px);
    cursor: pointer; 
}

[data-ui="top-btns"] > my-btn span { width: 100%; }
[data-ui="top-btns"] > my-btn:has(span) { padding-right: 2rem; }
[data-ui="top-btns"] > my-btn:has(svg) { padding-left: 4rem; }


@media (pointer: coarse) {
    [data-ui="top-btns"] > my-btn {
        transition-delay: 0.3s;
    }
    [data-ui="top-btns"] > my-btn:active {
        transition-delay: 0s;
        transition: box-shadow 0.1s;
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.9);
    }
}

@media (pointer: fine) { 
    [data-ui="top-btns"] > my-btn:hover,
    [data-ui="settings"] my-btn:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

/* tooltip */
my-btn[tooltip]::after { 
    content: attr(tooltip);
    position: absolute;
    top: calc(100% + 0.6rem); height: 4rem;
    padding: 0 2rem;
    background-color: black;
    font-family: sans-serif;
    font-size: 1.4rem;
    color: var(--color-cream);
    white-space: nowrap;
    display: flex;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.90);
    transition: opacity var(--transition-duration), transform var(--transition-duration);
}

@media (pointer: fine) { 
    my-btn[tooltip]:hover::after,
    my-btn[tooltip]:hover::after { 
        opacity: 1;
        transform: scale(1);
    }

    [data-ui="vr-app"].tracks-open [data-ui="top-btns"][data-side="right"] > my-btn[data-role="switcher-fs"]:hover::after,
    [data-ui="vr-app"].tracks-open [data-ui="top-btns"][data-side="right"] > my-btn[data-role="settings-open"]:hover::after,
    [data-ui="vr-app"].settings-open [data-ui="top-btns"][data-side="right"] > my-btn[data-role="settings-open"]:hover::after { 
        opacity: 0;
        transform: scale(1);
    }

    [data-ui="vr-app"].tracks-open my-btn[data-role="tracks-open"]:hover::after { 
        opacity: 0;
        transform: scale(1);
    }
}

[data-ui="top-btns"][data-side="left"] > my-btn::after { left: 0; right: auto; transform-origin: left top; }
[data-ui="top-btns"][data-side="right"] > my-btn::after { left: auto; right: 0; transform-origin: right top; }

my-btn[tooltip-left]::after { left: 0; right: auto; transform-origin: left top; }
my-btn[tooltip-right]::after { left: auto; right: 0; transform-origin: right top; }
my-btn[tooltip-top]::after { left: 50%; right: auto; top: auto; bottom: calc(100% + 1rem); transform-origin: bottom; }
my-btn[tooltip-right-top]::after { left: auto; right: 0; top: auto; bottom: calc(100% + 1rem); transform-origin: right bottom; }


[data-ui="top-btns"] > my-btn svg,
[data-ui="settings"] my-btn svg { 
    position: absolute;
    left: 0; top: 50%; width: 4rem; height: auto;
    transform: translate(0,-50%) scale(0.8);
    pointer-events: none;
}

my-icon svg { 
    position: absolute;
    width: 100%; height: 100%;
    transform: scale(0.8);
    pointer-events: none!important;
}

/* [data-ui="top-btns"] my-btn svg * { transition: fill calc(var(--transition-duration) / 2); fill: #fff; stroke: #fff; }\ */
/* [data-ui="top-btns"] my-btn svg * { transition: fill calc(var(--transition-duration) / 2); stroke: #fff; }\ */

@media (pointer: fine) { 
    /* [data-ui="top-btns"] my-btn:hover svg * { fill: #000; } */
}


[data-ui="top-btns"][data-side="left"] { left: 2rem; }

[data-ui="top-btns"][data-side="left"] > my-btn:not(:last-child) { margin-right: 1rem }

[data-ui="top-btns"][data-side="right"] { right: 2rem; }

[data-ui="top-btns"][data-side="right"] > my-btn:not(:first-child) { margin-left: 1rem }



[data-ui="top-btns"][data-side="right"] > my-btn[data-role="book"] {
    width: 12rem;
    background-color: var(--color-gold);
}

[data-role="info"].hidden {
    display: none;
}








[data-ui="settings"] {
    position: absolute;
    box-sizing: border-box;
    right: 2rem; top: 6rem; width: 21.2rem;
    border: 0.1rem solid var(--color-gold);
    backdrop-filter: blur(15px);
    padding: 1rem 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);
}
[data-ui="settings"] my-btn { pointer-events: none; }

[data-ui="vr-app"].settings-open [data-ui="settings"] {
    opacity: 1;
    transform: scaleY(1);
    pointer-events: all;
}
[data-ui="vr-app"].settings-open [data-ui="settings"] my-btn { pointer-events: all; }




[data-ui="settings"] .row {
    display: flex;
    flex-direction: row;
}

[data-ui="settings"] .row my-btn {
    font-family: sans-serif;
    display: flex;
    width: 100%;
    flex-direction: row;
    font-size: 1.4rem;
    padding-left: 5.5rem;
}

[data-ui="settings"] .row my-btn:not(:hover) {
    background-color: rgba(0,0,0,0);
}

[data-ui="settings"] .row my-btn svg {
    left: 1rem;
}

[data-ui="settings"] .row my-btn .caption {
    flex-grow: 1;
    text-align: left;
}

[data-ui="settings"] .row my-btn .state {
    flex-grow: 0;
    display: none;
    box-sizing: border-box;
    width: 5rem;
}

[data-ui="settings"] .row.size {
    padding-left: 1rem;
    padding-right: 0.5rem;
}

[data-ui="settings"] .row.size my-btn {
    width: 4rem;
    flex-grow: unset;
    padding: 0;
}

[data-ui="settings"] .row.size my-btn svg {
    left: 0rem;
}

[data-ui="settings"] .row.size .caption {
    flex-grow: 1;
    font-family: sans-serif;
    font-size: 1.4rem;
    line-height: 4rem;
    padding-left: 0.5rem;
    color: white;
}

[data-ui="settings"] .row my-icon {
    position: relative;
    width: 4rem; height: 4rem;
}

main:not(.auto-tour) .state[data-st="hs-auto-tour-off"],
main.auto-tour .state[data-st="hs-auto-tour-on"],
main:not(.autorot) .state[data-st="hs-auto-rot-off"],
main.autorot .state[data-st="hs-auto-rot-on"],
main:not(.auto-video) .state[data-st="hs-video-off"],
main.auto-video .state[data-st="hs-video-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="top-btns"][data-side="left"] { left: 1rem; }
    [data-ui="top-btns"][data-side="right"] { right: 1rem; }

    [data-ui="top-btns"][data-side="left"] > my-btn[data-role="menu-open"] { width: 4rem; font-size: 0; padding: 0; }
 
    [data-ui="top-btns"][data-side="right"] > my-btn[data-role="book"] {
        width: 6rem;
        background-color: var(--color-gold);
    }

    [data-ui="vr-app"] [data-ui="settings"] {
        left: 0; top: auto; bottom: 10rem; width: 100%;
        padding: 2rem 4rem; border: 0;
        background-color: rgba(0,0,0,0.1);
        transform-origin: bottom;
        transition: transform var(--transition-duration), bottom var(--transition-duration), opacity var(--transition-duration);
    }

    [data-ui="vr-app"].settings-open [data-ui="settings"] {
        bottom: 0;
    }

    [data-ui="vr-app"].settings-open [data-ui="settings"] my-btn { pointer-events: all; }




}