@import "globals.scss";

$avatar-size: 65px;

.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 {
        margin: 2px;
        //background-color: white;
    }

    .teamRow {
        width: 50%;

        &.reverse {
            flex-wrap: wrap;
            flex-direction: row-reverse;
        }

        .panelBack {
            width: 150px;
            height: 65px;
            //top: 12%;
            border-radius: 5px;
            justify-content: center;
            box-shadow: 0px 0px 10px black;
            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 4px;
            width: $avatar-size;
            height: $avatar-size;
            // opacity: 0;
            // transition: left 4s ease-in;
            // transition: opacity 4s ease-in;
            border-radius: 10px;
            box-shadow: 0px 0px 10px black;
            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 {
            }
        }
    }
}