section[btns] my-btn {
    position: relative;
    display: block;
    border: 0;
    border-radius: var(--btn-border-radius);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 4rem; height: 4rem;
    background-color: rgba(0, 44, 104, 0.6);
    cursor: pointer;
    transition: background-color var(--transition-duration), box-shadow 0.3s;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.0);
    backdrop-filter: blur(10px);
}

section[btns] my-btn {
    margin: 0 1rem 0 0;
}

section[btns][nav] my-btn {
    margin: 0 0 0 1rem;
}

section[btns][mice] my-btn {
    margin: 0.5rem 0 0.5rem 0;
}

@media (pointer: coarse) {
    section[btns] my-btn {
        transition-delay: 0.3s;
    }
    section[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) { 
    section[btns] my-btn:hover {
        background-color: rgba(255, 255, 255, 0.9);
    }
}

section[btns] my-btn.prev:after,
section[btns] my-btn.next:after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    left: 50%; top: 50%; width: 1.5rem; height: 1.5rem;
    border: 0 solid #dddddd;
    border-width: 0 3px 3px 0;
    transform: translate(-50%,-50%) translateX(-0.3rem) rotate(-45deg);
    transition: border 0.4s;
}

@media (pointer: fine) { 
    section[btns] my-btn:hover.prev:after,
    section[btns] my-btn:hover.next:after {
        border-color: #000000;
    }
}

section[btns] my-btn.prev:after {
    transform: translate(-50%,-50%) translateX(0.3rem) rotate(135deg);
}

section[btns] my-btn.info:after {
    content: 'i';
    position: absolute;
    box-sizing: border-box;
    left: 50%; top: 50%; width: auto; height: auto;
    transform: translate(-50%,-50%);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.8rem;
    /* font-weight: bold; */
    transition: color 0.4s;
    color: #dddddd;
}

@media (pointer: fine) { 
    section[btns] my-btn:hover.info:after {
        color: #000000;
    }
}

section[btns] my-tooltip  {
    bottom: 4.3rem; 
}

section[btns] my-btn svg * { transition: fill calc(var(--transition-duration) / 2); fill: #fff; }
@media (pointer: fine) { 
    section[btns] my-btn:hover svg * { fill: #000; }
}

section[btns] my-btn.on,
section[btns] my-btn.off { display: none; }

section[btns] my-btn.on svg .off { opacity: 0; }
section[btns] my-btn.off svg .on { opacity: 0; }


body:not(.autorot) section[btns] my-btn.autorot.off,
body.autorot section[btns] my-btn.autorot.on { display: block; }

body:not(.fullscreen) section[btns] my-btn.fullscreen.off,
body.fullscreen section[btns] my-btn.fullscreen.on { display: block; }



section[btns][mice] my-btn.measure,
section[btns][mice] my-btn.floorplan,
section[btns][mice] my-btn.pdf {
    transition: height var(--transition-duration), opacity var(--transition-duration), transform var(--transition-duration), margin var(--transition-duration);
}

body:not(.btn_measure)  section[btns][mice] my-btn.measure,
body:not(.btn_floorplan)  section[btns][mice] my-btn.floorplan,
body:not(.btn_pdf)  section[btns][mice] my-btn.pdf {
    height: 0;
    transform: scale(0);
    transform-origin: center;
    opacity: 1;
    pointer-events: none;
    margin: 0
}