@import "../../common.scss";

WeaponInfo {
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    top: 0px;
    transition: all 0.2s ease;

    &:intro {
        opacity: 0;
        top: -25px;
    }

    .text {
        font-size: 96px;
        font-family: $font-family;
        text-shadow: 2px 2px 2px black;
        text-stroke: 6px black;
        color: white;
        justify-content: center;
        align-items: center;
    }

    .fuel {
        position: relative;
        height: 25%;
        width: 90%;
        align-items: center;
        background-color: rgba(black, 0.8);
        border: 2px solid rgba(black, 0.8);
        border-radius: 4px;
        margin-left: 35px;

        .percentageText {
            position: absolute;
            width: 100%;
            justify-content: center;
            font-size: 56px;
            font-family: $font-family;
            text-shadow: 2px 2px 2px black;
            text-stroke: 4px black;
            color: white;
            z-index: 2;
        }

        .fill {
            background-image: linear-gradient(0deg, #e01a00dc 0%, #00a108dc 70%);
            height: 100%;
            transition: height 150ms ease-in;
            border-radius: 4px;
        }
    }

    .hint {
        position: relative;
        width: 100%;
        height: 70%;
        align-items: center;
        justify-content: center;
        white-space: nowrap;

        inputglyph {
            flex-shrink: 0;
            width: 175px;
            height: 175px;
        }
    }
}