@import "/ui/Hud/Style.scss";

ExperienceBar {
    .hud {
       
      
    
       

    }
        .exp-balls 
        {
            
            position: absolute;
            background-color: rgba(210, 211, 213, 0);
            bottom: 40%;
            height: 300px;
            width: 100%;
            transform: scaleY(-1);
          
           
            
           
            .exp-ball 
            {
                
                position: relative;
                width:14%;
                height: 12%;
              
                background-color: rgba(0, 0, 0, 0.63);
                border-radius: 20%;
                overflow: hidden;
            
                transition: opacity 1s ease-in-out;
                border: 2px solid rgb(255, 255, 255);
                
               
               
                    
                .progress 
                {
                    left:0;
                    position: relative;
                    width: 100%;
                    bottom: 0;
                    background: linear-gradient(to bottom, rgb(255, 217, 0), rgb(255, 96, 4), rgb(255, 225, 0));
                    transition: width 1s ease-in-out;
                        
                        /* Border-Radius auf 50% setzen */
                        overflow: hidden;
                    
                            
                }
            }
            
        }
    
        
    
        

    .container {
        position: relative;
        width: 300px;
        flex-direction: column;
        transition: all 1.4s ease-out;
        position: absolute;
        right: 200px;
        bottom: 10px;




        .level-details {
        
            width: 100%;
            position: relative;
            
            justify-content: space-evenly;

            color: rgb(201, 45, 45);

            .level {
                position: relative;
                font-size: 15px;
                font-family: Geneva;
                color: rgb(255, 255, 255);
                bottom: 100%;
                font-weight: bold;




            }

            .level-exp {

                position: relative;
                font-size: 15px;
                font-family: Geneva;
                font-style: italic;
                left: -1%;
                bottom: 100%;
                color: gold;
                font-weight: bold;
            }
        }

        .exp-bar {
            margin-top: 5px;
            height: 27px;
            border: 1px rgb(0, 0, 0);
            border-radius: 10%;
            box-shadow: 1px 1px 1px 1px #000000b4;
            border-radius: 5px;
            transition: opacity 1s ease-in-out;
            opacity: 0;

            .progress {
                padding: 1px;
                height: 100%;
                background-color: rgb(0, 153, 255);
                border-radius: 10%;
                transition: all 2.5s ease-out;
                border-width: 1%;
                border-color: rgb(225, 222, 222);
                border-radius: 5px;

            }
        }
        .expbar-show {
        animation: show-expbar 5s forwards; // Animation für 5 Sekunden
        }

        &.inactive {
            opacity: 0;
            transform: translateX(-100%);
        }
    }
}
@keyframes show-expbar {
    0% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}