@import '../common.scss';

GrubVitals {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-family: $font-primary;
    
    .grub-name {
        top: -24px;
        left: 64px;
        max-width: 400px;
        position: absolute;
        font-size: 56px;
        text-stroke-width: 16px;
        transform: rotate(-0.5deg);
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .grub-health-bar {
        position: absolute;
        top: 50px;
        height: 22px;
        width: 360px;
        border-radius: 4px;
        transform: rotate(-0.5deg);
        
        .grub-health-bar-inner {
            height: 100%;
            border-radius: 4px;
            transition: width 1s ease-out;
        }
    }
    
    .grub-health-percentage {
        right: 64px;
        bottom: 50%;
        position: absolute;
        font-size: 48px;
        transform: rotate(-0.5deg);
        text-stroke-width: 12px;
    }
    
    .vitals-parent {
        width: 100%;
        height: 100%;
        filter: drop-shadow(8px 8px 1px black);

        .vitals-shape {
            width: 100%;
            height: 100%;
            mask-image: url("textures/ui/grub_vitals_shape.png");
            mask-repeat: no-repeat;
            mask-size: contain;
            mask-mode: alpha;
        }
    }
    
    .minimal-vitals {
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 8px;
        filter: drop-shadow(3px 3px 1px black);
        padding-bottom: 48px;
        
        > label {
            font-size: 56px;
            text-stroke-width: 8px;
        }
        
        .min-grub-health-bar {
            border-radius: 16px;
            width: 240px;
            height: 28px;
            padding: 4px;
            
            .min-grub-health-bar-inner {
                border-radius: 16px;
                transition: width 1s ease-out;
            }
        }
    }
}