@import '../common.scss';

InventoryDisplay {
    bottom: 50px;
    right: 100px;
    position: absolute;
    font-family: $font-primary;
    opacity: 1;
    transition: opacity 0.15s;
    pointer-events: all;

    .tooltip {
        position: absolute;
        min-width: 100px;
        min-height: 50px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: white;
        background-color: rgba($menu-bg .95);
        font-size: 24px;
        z-index: 10;
        text-shadow: 2px 2px 2px black;
        text-stroke: 4px black;

        &.hide {
            opacity: 0;
        }

        .unlock-delay-text {
            color: lightgrey;
            font-size: 18px;
            text-shadow: 1px 1px 1px black;
            text-stroke: 2px black;
        }
    }

    .inv-panel {
        position: relative;
        width: 520px;
        border-radius: 8px;
        transform: skewX(-2px);
        background-color: rgb(233, 239, 232);

        .inv-title {
            position: absolute;
            background-color: rgb(66, 118, 62);
            width: 108px;
            height: 32px;
            left: -16px;
            top: -16px;
            transform: skewX(-2px);
            align-items: center;
            justify-content: center;
            border-radius: 4px;

            > label {
                color: white;
                font-size: 24px;
                text-shadow: 2px 2px black;
                transform: skewX(4px);
            }
        }

        .inv-content {
            margin-top: 8px;
            width: 100%;
            height: 100%;
            padding: 16px;

            .inv-weapons {
                flex-wrap: wrap;
                justify-content: space-between;
            }

            .inv-tools {
                border: 1px yellow;
                justify-content: space-between;
            }
        }

        .inv-row {
            width: 100%;
            height: 100px;
        }
    }
    //bottom: 50px;
    //right: 100px;
    //position: absolute;
    //font-family: $font-primary;
    //font-size: 128px;
    //transition: transform 0.3s;
    //background-color: $hud-bg;
    //border-radius: 32px;
    //flex-direction: column;
    //padding: 12px;
    //justify-content: space-between;
    //pointer-events: all;
    //
    //.inv-row {
    //    width: 100%;
    //    height: 100px;
    //}
    //

    &.hide {
        opacity: 0;
        pointer-events: none;
    }
}