@import '../common.scss';

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-family;

    .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%);
    }
}