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

InteractionHint {
    
    flex-direction: row;
    transform-origin: left top;
    opacity: 0;
    font-family: Geneva;
  
    

   

    .content {
        position: relative;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        
    }

    .icon {
        position: relative;
        width: 25px;
        aspect-ratio: 1;
        margin-right: 25px;
        transform: translateX(-50%);
        transition: all 0.2s;

        
    }

    .interactions {
        position: relative;
        padding: 5px;
        bottom:  5px;
        background-color: rgba(0, 0, 0, 0.288);
        box-shadow: 5 0 0px 0 rgba(0, 0, 0, 0.5);
        gap: 2px;
        flex-direction: column-reverse;
        border-width: 5px;
        border-color: rgb(0, 0, 0);
        

        
        
    }
    .item{
        position: absolute;
        bottom: -250px;
        left: 250px;
    }
   
    .interaction {
        position: relative;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size:20px;
        top: 1%;
        font-family: Geneva;
        margin-left: 10px;
        margin-right: 5px;

        
        

        .circle {
            position: relative;
            justify-content: center;
            align-items: center;
            margin-right: 0px;
            margin-left: 0px;
            width: 20px;
            aspect-ratio: 1;
          
          
            
           
        }

        .description {
            position: relative;
            text-shadow: $text-shadow-sm;
            font-weight: 700;
            margin-top: 5px;
            max-width: 425px;
            transition: all 0.2s;
            font-family: Geneva;
            font-size: 20px;
            letter-spacing: 2px;
            
        }

        .hint {
            position: relative;
            margin-right: 12px;
           
        }
    }

    &.visible {
        opacity: 1;
    }
}