Vitals {
    position: absolute;
    bottom: 96px;
    left: 96px;
    flex-direction: column-reverse;
    gap: 8px;

    label {
        font-family: Open Sans;
        font-weight: 500;
    }

    .bar {
        width: 350px;
        padding: 4px 16px;
        align-items: center;
        gap: 16px;
        position: relative;
        background-color: #00000080;

        &:before {
            left: 0;
            top: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #00000050;
            border: 0.5px solid black;
            mask-position: center;
            mask-size: 32px;
            mask-image: url( ui/diag_line_mask.png );
        }

        .bar-inner {
            left: 0;
            top: 0;
            position: absolute;
            height: 100%;
            width: 100%;
            border: 1px solid #e6ad12;
            box-shadow: 0px 0px 50px #f802;
            background-image: radial-gradient( #ffc94400, #f4ab2cc6 );

            &:before {
                left: 0;
                top: 0;
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: #ffaf007b;
                mask-position: center;
                mask-size: 32px;
                mask-image: url( ui/diag_line_mask.png );
            }
        }

        &.alt {
            opacity: 0.5;
        }
    }

    .icon {
        background-tint: #e6ad12;
        justify-content: center;
        align-items: center;
        height: 24px;
        width: 24px;
        background-size: cover;
        background-repeat: no-repeat;
    }

    label, i {
        font-size: 32px;
        font-weight: 600;
        color: #fc5;
        text-shadow: 0px 0px 10px #f50;

        &.small {
            font-size: 16px;
        }
    }
}