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

ItemInformation {
    position: relative;
    
    width: 380px;
    height: 100%;
    max-height: 700px;
    align-items: center;
    transition: all 0.08s ease-out;
    font-family: Geneva;    
    flex-direction: column;
    margin-left: 50px;
  
   
    border-radius: 15px;
    border-left: 1px solid #FFD700;
    border-width: 1px;
    border-color: #ffffff;
    
    
    &.tier-c {
            background-color: rgba(190, 190, 190, 0.1);
            
        }
    
        &.tier-a {
            
            background-image: url(/ui/hud/blue.gif);
            background-size: cover;
            background-position: center;
            
            text-shadow: 1px 1px 4px rgb(85, 199, 228);
            border-width: 1px;
            border-color: rgb(85, 199, 228);
        }
    
        &.tier-b {
          
            background-image: url(/ui/hud/green.gif);
            background-size: cover;
            background-position: center;
         
            
            border-width: 1px;
            border-color: rgb(52, 197, 52);
            
        }
    
        &.tier-s {
            
            background-image: url(/ui/hud/red2.gif);
            background-size: cover;
            background-position: center;
           
            border-width: 1px;
            border-color: rgb(255, 0, 0);

            
            
        }
    
        &.tier-ss {
            
            background-image: url(/ui/hud/purple2.gif);
            background-size: cover;
            background-position: center;
            
            border-width: 1px;
            border-color: rgb(255, 0, 255);
        }
    
        &.tier-sss {
            
            background-image: url(/ui/hud/gold1.gif);
            background-size: cover;
            background-position: center;
          
            border-width: 1px;
            border-color: #ffd900;
            
        }
        &.tier-ultimate {
            
            background-image: url(/ui/hud/ultimate.gif);
            background-size: cover;
            background-position: center;
          
            border-width: 1px;
            border-color: #ff8800;
            
            
            
            
        }
    
    

    .item-details {
        position: relative;
        width: 100%;
        height: 100%;
        max-height: 100%;
        padding: 15px 25px;
        flex-direction: column;
        font-family: Geneva;
        opacity: 10;
      
        
        
        
        


        .top-row {
            
            position: relative;
            width: 100%;
            height: 100%;
           
            align-items: center;
            font-family: Geneva;
            flex-direction: column;
         
            max-height: 30%;
            

            .item-price {
                position: relative;
                height: 100%;
                width: 100%;
                color: red;
                flex-direction: column;
                font-family: Geneva;
                font-size: 20px;
                letter-spacing: 2.5px;
                font-weight: bold;
                justify-content: center;
                align-items: center;
   
                max-height: 20%;
                .item-price-name{
                    height: 100%;
                    
                    position: relative;
                    align-items: center;
                    position: relative;
                    font-size: 15px;
                    justify-content: center;
                    color: rgba(255, 255, 255, 0.445);
                   
                }
            }
            .item-price2 {
                position: relative;
                height: 100%;
                width: 100%;
                color: rgb(0, 255, 76);
                flex-direction: column;
                font-family: Geneva;
                font-size: 20px;
                letter-spacing: 2.5px;
                font-weight: bold;
                justify-content: center;
                align-items: center;
   
                max-height: 20%;
                .item-price-name{
                    height: 100%;
                    
                    position: relative;
                    align-items: center;
                    position: relative;
                    font-size: 15px;
                    justify-content: center;
                    color: rgba(255, 255, 255, 0.39);
                   
                }
            }
            .item-name-top{
                position: relative;
                    height: 100%;
                    max-height: 25%;
                    justify-content: center;
                    align-items: center;
                    font-family: Geneva;
                    font-size: 27px;
                    font-style: italic;
                    text-decoration:underline overline;
                    text-shadow: 1px 1px 4px rgb(5, 5, 5);
                  
                    font-weight: 800;
                    color: rgba(161, 161, 161, 0.719);
                    flex-direction: column;
                
                    height: 100%;
            }
            .item-name {
                position: relative;
                height: 100%;
                max-height: 25%;
                justify-content: center;
                align-items: center;
                font-family: Geneva;
                font-size: 27px;
                font-style: italic;
                
                font-weight: 800;
                color: white;
                flex-direction: column;
      
                height: 100%;
                


                .tier {
                    position: relative;
                    margin-top: 10px;
                    font-size: 24px;
                   
                    text-align: center;
                    font-family: Geneva;
                    justify-content: center;
                    align-items: center;
                    font-weight: 400;
  
                    height: 100%;
                    

                    &.C {
                        color: rgb(190, 190, 190);
                    }

                    &.B {
                        color: rgb(85, 199, 228);
                    }

                    // Define color for Tier B
                    &.A {
                        color: rgb(52, 197, 52);
                    }

                    // Define color for Tier A
                    &.S {
                        color: rgb(255, 0, 0);
                        
                    }

                    // Define color for Tier S
                    &.SS {
                        color: rgb(255, 0, 255);
                    }

                    // Define color for Tier SS
                    &.SSS {
                        color: #ffd900;
                    }
                    &.Ultimate {
                        color: #ff8000;
                       
                    }

                    // Define color for Tier SSS
                }

                .lvl {
                    position: relative;
                    height: 100%;
                    
                    font-size: 24px;
                    font-family: Geneva;
                    font-weight: bolder;
         
                    &.level-color-0 {
                        color: #535353;
                        /* Dunkelste Farbe (Dunkelgrau) */
                    }

                    &.level-color-1 {
                        color: #9e9e9e;
                        /* Dunkelste Farbe (Dunkelgrau) */
                    }

                    &.level-color-2 {
                        color: #b4b4b4;
                        /* Mittlere dunkle Farbe (Dunkelgrau) */
                    }

                    &.level-color-3 {
                        color: #cecece;
                        /* Mittlere Farbe (Grau) */
                    }

                    &.level-color-4 {
                        color: #e4e4e4;
                        /* Mittlere helle Farbe (Dunkelgrau) */
                    }

                    &.level-color-5 {
                        color: #ffffff;
                        /* Hellste Farbe vor Gold (Hellgrau) */
                    }

                    &.level-color-6 {
                        color: #00570e;
                    }

                    &.level-color-7 {
                        color: #006d12;
                    }

                    &.level-color-8 {
                        color: #008a17;
                    }

                    &.level-color-9 {
                        color: #00a71c;
                    }

                    &.level-color-10 {
                        color: #00c220;
                    }

                    &.level-color-11 {
                        color: #3f4f96;
                    }

                    &.level-color-12 {
                        color: #4d5fb3;
                    }

                    &.level-color-13 {
                        color: #5d73d4;
                    }

                    &.level-color-14 {
                        color: #6982f0;
                    }

                    &.level-color-15 {
                        color: #6f8aff;
                    }

                    &.level-color-16 {
                        color: #6e3200;
                    }

                    &.level-color-17 {
                        color: #8d3f00;
                    }

                    &.level-color-18 {
                        color: #ad4e00;
                    }

                    &.level-color-19 {
                        color: #d15e00;
                    }

                    &.level-color-20 {
                        color: #f16d00;
                    }

                    &.level-color-21 {
                        color: #9c00a1;
                    }

                    &.level-color-22 {
                        color: #ba00c0;
                    }

                    &.level-color-23 {
                        color: #d900e0;
                    }

                    &.level-color-24 {
                        color: #990000;
                    }

                    &.level-color-25 {
                        color: #db0000;
                    }

                    &.gold-color {
                        color: #FFD700;
                        /* Gold (Gold) */
                    }

                    &.black-color {
                        color: #000000;
                        /* Schwarz (Schwarz) */
                        text-shadow: 1px 1px 4px #FFD700;
                        /* Schimmernde Umrandung in Gold */
                    }
                }
            }
            

        }
        .aspect-description{
            position: relative;
            width: 100%;
            height: 100%;
            max-height: 5%;
            font-family: Geneva;
            font-size: 24px;
            align-items: center;
            font-weight: bolder;
            color: rgb(0, 47, 255);
            border-radius: 1px;
            gap: 15px;
            margin: 5px 0px;
            padding: 5px 0px;
            justify-content: space-evenly;
            text-shadow: 1px 1px 4px rgb(5, 5, 5);
            font-style: italic;
            text-decoration: underline;
            text-transform: uppercase;
            
            text-underline-offset: 5px;

           
        }
         .aspect-info{
                flex-direction: column;
                font-family: Geneva;
                font-size: 20px;
                align-items: center;
                font-weight: bolder;
                text-shadow: 1px 1px 4px rgb(0, 0, 0);
                position: relative;
                top: 20px;
                gap: 15px;
            }


        .item-description {
            position: relative;
            width: 100%;
            height: 100%;
            
            max-height: 5%;
            
            font-family: Geneva;
            
            font-size:20px;
            align-items: center;
            
            font-weight: bolder;
    

            
            color: rgb(255, 255, 255);
           
            border-radius: 1px;
            gap: 15px;
           
            margin: 5px 0px;
            padding: 5px 0px;
            justify-content: space-evenly;
            
        }


        .item-description1 {
            position: relative;
            height: 20%;
            font-family: Geneva;
            justify-content: center;
            font-size: 16px;
            max-height: 5%;
            color: rgb(130, 255, 140);
            gap: 10px;
            

            .x{
                
                font-weight: bold;
                color: rgb(187, 187, 187);
                font-size: 17px;
                
            }
            .y1{
                    
                    font-weight: bold;
                    color: rgb(168, 167, 200);
                    font-size: 17px;
            }
            .y{
                
                font-weight: bold;
                color: rgb(255, 0, 0);
                font-size: 17px;
            }
            .y2{
                
                font-weight: bold;
                color: rgb(122, 0, 106);
                font-size: 17px;
            }
            .y3{
                
                font-weight: bold;
               
                color: rgb(0, 42, 158);
                font-size: 17px;
            }
            .y4{
                
                font-weight: bold;
                color: rgb(0, 197, 223);
                font-size: 17px;
            }
            .y5{
                
                font-weight: bold;
                color: rgb(102, 0, 0);
                font-size: 17px;
            }

       
        }
        .item-description1.insufficient-level 
        {
            font-style: italic;
            text-shadow: 1px 1px 4px rgb(0, 0, 0);
            gap: 10px;
            color: red;
            .txt{
                
            }
            .lvl{
                
            }
         }
         .item-description.insufficient-level
         {
           
            gap: 10px;
            color: red;
            .txt{
                
            }
            .lvl{
                
            }
         }


    }
}