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

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

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

    .text {
        font-size: 124px;
        font-family: $font-primary;
        text-shadow: 2px 24px 16px black;
        text-stroke: 24px black;
        color: white;
        justify-content: center;
        align-items: center;
    }

    .fuel {
        position: relative;
        height: 100px;
        width: 100%;
        align-items: center;
        background-color: black;
        border: 12px solid black;
        margin-left: 35px;

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

        .fill {
            background-image: linear-gradient(to right, red, green);
            height: 100%;
            transition: height 150ms ease-in;
        }
    }

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

        inputglyph {
            flex-shrink: 0;
            width: 175px;
            height: 175px;
            filter: border-wrap(6px black) drop-shadow(0 8px 24px black);
        }
    }
}