@import "/UI/Theme.scss";

InventorySlot
{
    width: 96px;
    height: 96px;
    background-color: $hud-element-bg-subtle;
    border-radius: $hud-radius;
    transition: all 0.1s ease;
    position: relative;

    &.droppable
    {
        pointer-events: all;
    }
}

InventorySlot .index
{
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 12px;
    font-weight: 650;
    font-family: Poppins;
    color: rgba( white, 0.5 );
    pointer-events: none;
}

InventorySlot .icon
{
    position: absolute;
    top: 16px;
    left: 4px;
    right: 4px;
    bottom: 18px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    mix-blend-mode: lighten;
    background-tint: rgba( $hud-color, 0.6 );
    pointer-events: none;
}

InventorySlot .name
{
    position: absolute;
    bottom: 4px;
    left: 4px;
    right: 4px;
    font-size: 12px;
    font-weight: 600;
    font-family: Poppins;
    color: rgba( white, 0.6 );
    text-align: center;
    pointer-events: none;
}

InventorySlot.empty
{
    opacity: 1;
}

InventorySlot:not( .empty )
{
    background-color: $hud-element-bg;
}

InventorySlot.drag-hover
{
    background-color: rgba( $hud-color, 0.15 );
    border: 1px solid rgba( $hud-color, 0.5 );
    box-shadow: 0px 0px 16px rgba( $hud-color, 0.3 );

    .index
    {
        color: $hud-color;
    }
}

InventorySlot.active
{
    opacity: 1;
    background-color: $hud-element-bg;
    border: 0.5px solid rgba( $hud-color, 0.3 );

    .index
    {
        color: $hud-color;
    }

    .icon
    {
        background-tint: $hud-color;
    }

    .name
    {
        color: $hud-color;
    }
}

InventorySlot.hovered
{
    background-color: $hud-element-bg;
    border: 0.5px solid rgba( $hud-color, 0.2 );

    .icon
    {
        background-tint: rgba( $hud-color, 0.8 );
    }

    .name
    {
        color: rgba( white, 0.9 );
    }
}

InventorySlot.selected
{
    opacity: 1;
    background-color: $hud-element-bg-deep;
    border: 0.5px solid rgba( $hud-color, 0.5 );
    box-shadow: 0px 0px 12px rgba( $hud-color, 0.2 );

    .index
    {
        color: $hud-color;
    }

    .icon
    {
        background-tint: $hud-color;
    }

    .name
    {
        color: $hud-color;
    }
}