.map-element:hover > .map-element__inner-content .container__name {
  transform: scale(1.4);
  background-color: #000f;
}



.container .container__name {
  top: -6px;
  position: absolute;
  background-color: #0008;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #fff;
  transition: all 0.3s;
  z-index: 1000000;

}


.container .container__memory-usage {
  position: absolute;
  bottom: 20px;
  left: 25px;
  z-index: 1000000;
  background-color: #0008;
  padding: 2px 4px;
  color: #fff;
  border: solid 1px #fff;
  border-radius: 4px;
}


/* ========================================================== */





.container.state--created .map-element__sprite,
.container.state--exited .map-element__sprite  {
  filter: grayscale(100%);
  border-radius: 50%;
  animation: pulsar 1.5s infinite ease-in-out;

}
.container.state--created .container__name::before,
.container.state--exited .container__name::before {
  content: "💩";
  font-size: 1rem;
}

.container.state--created::before,
.container.state--exited::before {
  display: block;
  content: " ";
  width: calc(100% + 60px);
  height: calc(100% + 60px);
  top: -38px;
  left: -38px;
  border : solid 10px #000;
  border-radius: 50%;
  position: absolute;
  background-color: #0008;
}


/* =============================================== */


@keyframes pulsar {
  0% {
    box-shadow: 0 0 10px 5px rgba(255, 0, 0, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(255, 0, 0, 0.75);
    transform: scale(1.3);
  }
  100% {
    box-shadow: 0 0 10px 5px rgba(255, 0, 0, 0.5);
    transform: scale(1);
  }
}

/* =============================================== */

.compose-cluster {
  background-color: #0f08;
  border: 1px solid #0f0;
  border-radius: 16px;
}