@import "/UI/Theme.scss";

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

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

InventorySlot .index
{
    position: absolute;
    bottom: -41px;
    left: 50%;
    transform: translateX( -50% );
    width: 35px;
    height: 35px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.3;
    margin: 0 auto;
    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;
    background-tint: rgba( $color-accent, 0.6 );
    mix-blend-mode: lighten;
    pointer-events: none;
}

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

InventorySlot.no-tint .icon
{
    background-tint: white;
    opacity: 0.85;
}

InventorySlot.empty
{
    opacity: 1;

    .index
    {
        opacity: 0;
    }
}

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

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

    .index
    {
        opacity: 1;
    }
}

InventorySlot.active.no-tint .icon
{
    opacity: 1;
    mix-blend-mode: normal;
    background-tint: white;
}

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

    .index
    {
        color: $color-accent;
    }

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

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

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

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

InventorySlot.selected
{
    opacity: 1;
    background-color: rgba( $color-accent, 0.8 );
    box-shadow: 0px 0px 12px rgba( $color-accent, 0.2 );

    .index
    {
        color: $color-accent;
    }

    .icon
    {
        background-tint: $color-accent;
        top: 8px;
        left: 2px;
        right: 2px;
        bottom: 14px;
    }

    .name
    {
        color: white;
    }
}