DraggableItem {
    position: absolute;

    pointer-events: all;
    
    
    width: 80px;
    height: 80px;

    img {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        

        filter: drop-shadow(5px 5px 0px rgba(black, 0.2));
        filter: border-wrap(2px rgba(rgba(122, 250, 3, 0.747), 0.5));
    }

    transition: right 0.06s ease-out,
    top 0.08s ease-out,
    opacity 0.11s ease-out,
    transform 0.11s ease-out,
    filter 0.2s ease;
    
    z-index: 99;
    transform: scale(1);
    cursor: pointer;
    overflow: visible;

    .sub-label {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        
        
        display: none;
        opacity: 0;
    }

    .drop-label {
        transition: opacity 0.4s ease-out;
        display: flex;
        position: absolute;
        width: 64px;
        height: 64px;
        background-image: url("ui/hud/delete_item_64_45deg.png");
    }

    .equip-label {
        transition: opacity 0.2s ease-out;
        display: flex;
        position: absolute;
        width: 64px;
        height: 64px;
        top: -5px;
        left: -5px;
        background-image: url("ui/hud/equip_item_64_30deg.png");
        
    }
    
    &.is-hovering-character {
        .can-drop {
            .equip-label {
                opacity: 1;
                
            }
        }
    }

    &.is-hovering-character, &.is-hovering-slot {
        &:not(.can-drop) { 
            .title-container {
                .label {
                    background-color: rgba(#550301, 1);
                    opacity: 0.2;
                }
            }
        }
    }
    
    &.is-hovering-slot {
        .put-label {
            opacity: 1;
            
        }
    }

    &.should-trash {
        .drop-label {
            opacity: 1;
        }
        
        .title-container {
            .label {
                opacity: 0.1;
                background-color: rgba(#da0000ab, 1);
                font-family: Geneva;
            }
        }
    }
    
    .title-container {
        position: absolute;
        height: 44px; // sorry this is a constant now
        
        // ?
        width: 300%;
        bottom: 100%;
        left: -100%;
        
        // center label
        justify-content: center;
        align-content: center;
        
        label {
            transition: opacity 0.2s ease-out, background-color 1.2s ease-out;
            
            font-family: HabboExtended;
            margin-bottom: 5px;
            padding: 7px 10px 7px 10px;
            color: white;
            background-color: rgba(#1b1c1b, 1);
            box-shadow: 4px 4px 0px black;
            font-size: 16px;
            font-weight: bold;
            letter-spacing: 2px;
            overflow: visible;
            transform-origin: top;
            text-shadow: 2px 2px 0px rgba(white, 0.5);
        }

    }

    &:intro {
        opacity: 0;
        transform: scale(0);
        filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.0));
    }

    &:outro {
        pointer-events: none;
        opacity: 0;
        filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.0));
    }
}