@import "globals.scss";
$avatar-size: 50px;

.root {
    width: 100%;
    height: 60px;
    transition: top 0.25s ease-out;
    display: flex;
    justify-content: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.35));
    backdrop-filter: blur($back-blur-size);
    z-index: 100;

    &.hidden
    {
        top: -10%;
    }
    
    .divider
    {
        width: 4px;
        margin:5px;
        //background-color: white;
    }

    .teamRow
    {
        width: 50%;
        &.reverse
        {
            flex-wrap: wrap;
            flex-direction: row-reverse;
        }

        .panelBack {
            width: 125px;
            height: 90%;
            top: 5%;
            border-radius: 15px 15px 15px 30px;
            border: 5px solid white;
            justify-content: center; 
            align-items: center;
        
            &.red
            {
                background-color: $red;
            }
        
            &.blue
            {
                background-color: $blue;
            }
        
            &.reverse
            {
                border-radius: 15px 15px 30px 15px;
            }

            .countText {
                font-size: 50px;
                font-family: Poppins;
                font-weight: bold;
                color: white;
            }
        }
        
        .avatar {
            margin: 0px 8px;
            width: $avatar-size;
            height: $avatar-size;
            top: 12%;
            left: 15%;
            // opacity: 0;
            // transition: left 4s ease-in;
            // transition: opacity 4s ease-in;
            border-radius: 10px;
            border: 2px solid rgb(255, 255, 255);
            transition: border 6s ease-in;
            //background-image: radial-gradient(rgba(66, 66, 66, 100%), rgba(17, 17, 17, 100%));
            background-color: hotpink;
            background-size: 100% 100%;
            justify-content: center;
            align-items: center;
            display: none;
        
            &.visible
            {
                display: flex;
            }

            &.occupied
            {
                //border: 3px solid white;
            }

            .deathLabel
            {
                font-family: Poppins;
                font-size: 90px;
                color:rgb(255, 255, 255);
	            text-shadow: 2px 2px 2px rgba(#000, 1);
                opacity: 0;
                
                &.visible
                {
                    opacity: 1;
                }
            }
        
            &.dead
            {
            }
        }
    }
}