@import "/UI/Styles/Theme.scss";

WeaponInfoComponent
{
    gap: 0px;
    flex-direction: column-reverse;
    justify-content: center;
    flex-grow: 0;
    position: relative;
    align-items: flex-end;
    right: -42px;
    top: 42px;

    WeaponViewer
    {
        opacity: 0.75;
    }

    .group
    {
        position: relative;
        flex-direction: row-reverse;
        margin: 0px 16px;
        padding-top: 8px;
        padding-bottom: 8px;
        right: 0;

        > .background
        {
            top: -2px;
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.35;
            background: linear-gradient( to right, rgba( black, 0.0 ), rgba( black, 0.9 ) );
        }

        &.active
        {
            > .background
            {
                opacity: 1;
            }
        }
    }

    InputHint
    {
        padding-left: 32px;
        padding-right: 32px;
    }
}

EquipmentRow
{
    justify-content: center;
    align-items: center;
    gap: 8px;
    opacity: 0.5;
    transform: scale( 0.9 );

    .icon
    {
        justify-content: center;
        align-items: center;
        width: 96px;
        height: 64px;
    }

    .image
    {
        position: absolute;
        width: 128px;
        height: 128px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .grow
    {
        flex-grow: 1;
        background-color: red;
    }

    .column
    {
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
    }

    &.is-active
    {
        opacity: 1;
        transform: scale( 1 );

        > .background
        {
            opacity: 1;
        }
    }

    .info
    {
        font-weight: bold;
        color: $main-color;
        flex-direction: column;
        justify-content: center;

        .row
        {
            justify-content: flex-end;
            align-items: flex-end;
        }

        .inventory
        {
            font-family: $main-font;
            font-size: 18px;
            color: rgba(255, 255, 255, 0.70);
        }

        .currentammo
        {
            font-family: $main-font;
            font-size: 32px;
            color: white;
            height: 35px;
            padding-right: 10px;
        }

        .gunname
        {
            font-family: $main-font;
            font-size: 20px;
            color: white;
            opacity: 1;
            min-width: 55px;
        }
    }
}