@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 {
      }
    }
  }
}