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

Inventory {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: $fullscreen-bg;
    backdrop-filter: $fullscreen-blur;
    pointer-events: all;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.79);
    transition: opacity 0.2s ease;

    &:intro {
            opacity: 0;
    }

    .sidehud {
        position: absolute;
            right: 88%;
            top: 1%;
            height: 100%;
            width: 7%;
            z-index: 10;
            padding: 10px;
            background-color: rgba(51, 51, 51, 0.452);
            margin-top: 50px;
            flex-direction: column;
            justify-content: flex-start;
            border-radius: 10px;
            margin-top: 10px;
            gap: 30px;
    }

    .list {
        position: absolute;
        
        width: 100%;
        height: 100%;
        

        .food {
                position: absolute;
                width: 100%;
                height: 100%;
                 transition: opacity 0.5s ease;
        
                &:intro {
                    opacity: 0;
                }
            }
           
        .inventory 
        {
            
            position: relative;
            width: 100%;
            height: 100%;
            flex-direction: row-reverse;
            transition: opacity 0.5s ease;
            
                &:intro {
                    opacity: 0;
                }
            
           

            
            
            

        .section2 {
        
                flex-direction: column;
                overflow-x: hidden;
                overflow-y: scroll;
                position: absolute;
                width: 100%;
                height: 100%;
                                
                left: 15%;
                z-index: -100;

                .box {
                
                        gap: 10px;
                        position: absolute;
                        left: 2.7%;
                        top: 7.5%;
                        width: 90%;
                
                        height: 3%;
                        z-index: 100;
                        
                        align-items: center;
                
                        .sort {
                             flex-direction: row;
                            position: relative;
                            font-size: 20%;
                        
                            font-weight: bold;
                        
                            color: rgb(255, 255, 255);
                            width: 5%;
                            height: 70%;
                            background-color: rgb(0, 0, 0);
                            border-color: rgba(255, 255, 255, 0.034);
                            border-width: 1px;
                            justify-content: center;
                            align-items: center;
                            background-size: 100%;
                        
                        
                            background-position: center;
                            border-radius: 5px;
                
                
                            background-position: center;
                            border-radius: 5px;

                            .tooltip {
                                    opacity: 0;
                                    transition: opacity 0.3s;
                                    background-color: rgb(121, 14, 14);
                                    box-shadow: 2px 2px 2px rgba(160, 154, 154, 0.932);
                                    width: 100%;
                                    justify-content: center;
                                    text-shadow: 3px 1px 0px black;
                                    color: #fff;
                                    text-align: center;
                                    padding: 5px;
                                    border-radius: 5px;
                                    position: absolute;
                                    top: -50px;
                                    /* Position über dem Button */
                                    left: 50%;
                                    transform: translateX(-50%);
                                    white-space: nowrap;
                                    z-index: 1000;
                                    font-size: 18px;
                                    font-weight: bold;
                                    font-family: 'Geneva';
                                    border-width: 1px;
                                    border-color: rgb(255, 255, 255);
                            
                                }
                            
                                &:hover .tooltip {
                                    opacity: 1;
                                }
                
                            :hover:not(.disabled) {
                
                
                                cursor: pointer;
                                sound-in: 'hover';
                
                                border-radius: 5%;
                                transform: scale(1.1);
                            }
                
                            &:active:not(.disabled) {
                                sound-in: 'sound4';
                                background-color: rgb(250, 134, 39);
                                padding: 0 1%;
                                border-radius: 5%;
                                align-items: center;
                            }
                
                        }
                
                
                    }
        
                .box2 {
                    
                    gap: 10px;
                    position: absolute;
                    left: 2.7%;
                    top: 44.5%;
                    width: 90%;
                   
                    height: 3%;
                    z-index: 100;
                    
                    align-items: center;
                    
                    .sort {
                        
                        flex-direction: row;
                        position: relative;
                        font-size: 20%;
                       
                        font-weight: bold;
                        
                        color: rgb(255, 255, 255);
                        width: 5%;
                        height: 70%;
                        background-color: rgb(0, 0, 0);
                        border-width: 1px;
                        justify-content: center;
                        align-items: center;
                        background-size: 100%;
                        border-color: rgba(255, 255, 255, 0.034);
        
                        background-position: center;
                        border-radius: 5px;

                        .tooltip {
                                opacity: 0;
                                transition: opacity 0.3s;
                                background-color: rgb(121, 14, 14);
                                box-shadow: 2px 2px 2px rgba(160, 154, 154, 0.932);
                                width: 100%;
                                justify-content: center;
                                text-shadow: 3px 1px 0px black;
                                color: #fff;
                                text-align: center;
                                padding: 5px;
                                border-radius: 5px;
                                position: absolute;
                                top: -50px;
                                /* Position über dem Button */
                                left: 50%;
                                transform: translateX(-50%);
                                white-space: nowrap;
                                z-index: 1000;
                                font-size: 18px;
                                font-weight: bold;
                                font-family: 'Geneva';
                                border-width: 1px;
                                border-color: rgba(255, 0, 0, 0.685);
                                
                            }
                        
                            &:hover .tooltip {
                                opacity: 1;
                            }
        
                        :hover:not(.disabled) {
        
        
                            cursor: pointer;
                            sound-in: 'hover';
                            
                           
                            border-radius: 5%;
                            
                        }
        
                        &:active:not(.disabled) {
                            sound-in: 'sound4';
                            background-color: rgb(250, 134, 39);
                            transform: scale(1.1);
                            align-items: center;
                        }
        
                    }
                    
        
                }
        
                                .Hello {
                                    position: relative;
                                    width: 9%;
                                    height: 4%;
                                    top: 1.5%;
                                    left: 20.5%;
                                    font-size: 26px;
                                    font-family: 'Geneva', sans-serif;
                                    color: white;
                                    z-index: -100;
                
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    background-color: rgba(124, 0, 0, 0);
                                   
                                    mask-size: 100%;
                                    mask-mode: alpha;
                                    background-position: center;
                                    background-size: 100%;
                                    border-radius: 15px;
                                    border-width: 1px;
                                 
                                    border-color: rgba(255, 255, 255, 0.267);    
                                    opacity: 1;
                                    text-align: center;
                                    text-shadow: 1px 1px 0px rgb(210, 21, 21);
                                    font-style: italic;
                                    background: linear-gradient(90deg, rgb(82, 74, 74) 0%, rgb(3, 110, 35) 50%, rgb(10, 211, 53) 100%);
                                   
                                    animation: glow 1.5s infinite alternate;
                
                                    @keyframes glow {
                                        from {
                                            text-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6), 0 0 30px rgba(255, 0, 0, 0.4);
                                        }
                
                                        to {
                                            text-shadow: 0 0 20px rgba(255, 0, 0, 1), 0 0 30px rgba(255, 0, 0, 0.8), 0 0 40px rgba(255, 0, 0, 0.6);
                                        }
                                    }
                                }
        
                .items {
                    position: relative;
                    
                    flex-wrap: wrap;
                    width: 700px;
                    top:70px;
                    gap: 1px;
        
        
        
        
        
        
                }
                .items2 {
                    position: relative;
                    
                    flex-wrap: wrap;
                    width: 700px;
                    top:140px;
                    gap: 1px;
        
        
        
        
        
        
                }
        
        
        
            }



            .section 
            {
               
                position: absolute;
                    right: 24%;
                    bottom: 20%;
                    width: 25%;
                    height: 60%;
                    top: 10%;
                    z-index: -10;
                
                background-color: rgba(10, 64, 146, 0);

                .character
                {
                    position: relative;
                    justify-content: space-between;
                    
                    background-color: rgba(255, 255, 255, 0);

                        .char
                        {
                            position: relative;
                                top: 1%;
                                z-index: -100;
                                width: 100%;
                                height: 100%;
                                    background-color: rgba(255, 255, 255, 0);
                                
                                   
                                    
                            
                        }
                    
                    
                    .box
                    
                    {
                        
                background-color: rgb(4, 255, 50);
                   
            
                    .Equippeditems
                    {
                        
                        right: -100%;
                        top:15%;
                        z-index: 1000;
                        position: absolute;
                        flex-direction: column;
                        gap: 30px;
                        .helmet {
                                position: relative;
                                width: 150%;
                            }
                        
                            .armor {
                                position: relative;
                                width: 150%;
                                right: 20%;
                            }
                        
                            .pants {
                                position: relative;
                                width: 150%;
                            }
                    }
                    .Access
                    {
                        position: relative;
                        top: -50px;
                        gap: 20px;
                       
                        
                    }
                    .hands{
                        position: relative;
                        top: -126px;
                        right: -500px;
                    }
                    .back{
                        position: relative;
                        top: -330px;
                        right: -500px;
                    }
                    .backpack{
                        position: relative;
                        top: -530px;
                        right: -500px;
                    }

                    
                    


                }
                
                    
                }
                
            }

        }

    }

    
    
    
    
        



}

@keyframes blink {
    0% {
        color: white;
    }

    100% {
        color: red;
    }
}