/******************************************************************************************************************************/
:scope{
    --audio-button-height: 10px;
    --audio-button-width: var(--audio-button-height);
    
}

@keyframes durationPopOut {
    0% {
        display:none;
        width: 0px;
    }
    
    80% {
        width: calc(var(--audio-button-width)*3);
    }
       
    100% {
        display:block;
        width: calc(var(--audio-button-width)*5);
    }
}

@keyframes durationPopIn  {
    0% {
        display:block;
        width: calc(var(--audio-button-width)*5);
    }
    
    20% {
        width: calc(var(--audio-button-width)*3);
    }
       
    100% {
        display:none;
        width: 0px;
    }
}

body{
        
        
        #player{
            /*transform: rotateX(60deg) rotateZ(-45deg);*/
            height: calc(var(--audio-button-height) + 4px);
            position:absolute;
            bottom:3vh;
            right:1vw;
            min-width: calc(var(--audio-button-height)*1);
            padding: 0;
            padding-left:calc(var(--audio-button-height)/2);
            padding-right:calc(var(--audio-button-width)/2);
            border-radius: calc(var(--audio-button-width));
            /*border: 1px solid black;*/
            /*box-shadow: 10px 10px 10px black;*/
            display: flex;
            justify-content:right;
            align-items: center;
            background: #00000044;
            
            div{
              margin: calc(var(--audio-button-height)/4);
              cursor: pointer;
            }
            
            #playButton.play, #playButton.pause, #stopButton{
                
            }
            
            #playButton.play{  
                width: 0; 
                height: 0;
                border-top: calc(var(--audio-button-height)/2) solid transparent;
                border-left: var(--audio-button-height) solid var(--3DText-color-face);
                border-bottom: calc(var(--audio-button-height)/2) solid transparent;
            }
            
            #playButton.pause{
                width: calc(var(--audio-button-width)/2); 
                height: var(--audio-button-height);
                border-left: calc(var(--audio-button-height)/4) solid var(--3DText-color-face);
                border-right: calc(var(--audio-button-height)/4) solid var(--3DText-color-face);
            }
            
            #stopButton{
                width: var(--audio-button-width); 
                height: var(--audio-button-height);
                background: var(--3DText-color-face);
            }
            
            #duration{
                span {
                    /* #position, */
                    display: block;
                    width: calc(var(--audio-button-height)*5);
                    height: calc(var(--audio-button-height)/2);
                    border-radius:  calc(var(--audio-button-height)/4);
                    background: var(--3DText-color-face);
                }
            }
            
           #duration.duration-hide, #duration.duration-display {
                width: calc(var(--audio-button-height)*5);
                height:calc(var(--audio-button-height)-4px);
                border: 1px solid white;
                box-sizing: border-box;
                border-radius: calc(var(--audio-button-height)/4);
                background: #ffffff44;
                }
            
           #duration.duration-display {
                animation-duration: 1s;
                animation-name: durationPopOut;
                animation-direction: normal;
                display: block;
            }
                
           #duration.duration-hide {
                animation-duration: 1s;
                animation-name: durationPopIn;
                animation-direction: normal;
                display: none;
            }
            
            
        }
    }
    
    }
    
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/