@import '../common.scss';

PlayerListEntry {
    align-items: center;
    
    .avatar-container {
        width: 72px;
        height: 72px;
        padding: 10px;
        z-index: 6;
        justify-content: center;
        
        .health-percentage {
            position: absolute;
            font-size: 24px;
            text-stroke-width: 8px;
            bottom: -12px;
        }
    }
    
    .name-bar {
        position: relative;
        width: 180px;
        height: 40px;
        left: -4px;
        z-index: 2;
        align-items: center;
        font-size: 24px;
        
        > label {
            margin: 0 20px;
            z-index: 4;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .percentage-bar {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 4;
            transition: width 1s;
        }
    }
}
//
//PlayerListEntry {
//    position: relative;
//    flex-shrink: 0;
//    padding-top: 10px;
//    transition: all 300ms ease-in;
//    width: 310px;
//    pointer-events: all;
//    align-items: center;
//    justify-content: center;
//    cursor: none;
//    font-family: $font-primary;
//
//    .avatar {
//        width: 65px;
//        height: 65px;
//        border-radius: 4px;
//        flex-shrink: 0;
//        margin-right: 8px;
//        margin-top: 4px;
//        border: 2px solid black;
//    }
//
//    .name {
//        font-size: 36px;
//        text-shadow: 2px 2px 2px black;
//        text-stroke: 4px black;
//        white-space: nowrap;
//        text-overflow: ellipsis;
//    }
//
//    .health {
//        width: 250px;
//        height: 25px;
//        border-radius: 4px;
//        border: 2px black;
//        flex-direction: column;
//        justify-content: center;
//        overflow: hidden;
//
//        .fill {
//            transition: all 750ms ease-in-out;
//            height: 100%;
//            width: 100%;
//            border-radius: 4px;
//        }
//
//        .health-amount {
//            position: absolute;
//            width: 100%;
//            justify-content: center;
//            text-align: center;
//            color: white;
//            font-size: 20px;
//            text-stroke: 4px black;
//            align-self: center;
//        }
//    }
//
//    .icon {
//        position: absolute;
//        left: -13px;
//        transition: opacity 100ms ease-out;
//        font-size: 36px;
//        color: $hud-bg;
//        text-shadow: 2px 2px 2px black;
//        animation-duration: 1s;
//        animation-name: wiggle;
//        animation-iteration-count: infinite;
//    }
//
//    &.inactive {
//        opacity: 0.75;
//        transform: translateX(-3%);
//    }
//}