@-webkit-keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0% { transform: scale(0); opacity: 0.1; }
  50% { transform: scale(1); opacity: 0.5; }
  75% { transform: scale(2); opacity: 0.0; }
  100% { transform: scale(0); opacity: 0.0; }
}

@-moz-keyframes pulse {
  0% { transform: scale(0); opacity: 0.1; }
  50% { transform: scale(1); opacity: 0.5; }
  75% { transform: scale(2); opacity: 0.0; }
  100% { transform: scale(0); opacity: 0.0; }
}

@-webkit-keyframes "pulse" {
  0% { transform: scale(0); opacity: 0.1; }
  50% { transform: scale(1); opacity: 0.5; }
  75% { transform: scale(2); opacity: 0.0; }
  100% { transform: scale(0); opacity: 0.0; }
}

@keyframes redden-element {
  0% { background-color: black; }
  50% { background-color: red; }
  100% { background-color: black; }
}

@-moz-keyframes redden-element {
  0% { background-color: black; }
  50% { background-color: red; }
  100% { background-color: black; }
}

@-webkit-keyframes "redden-element" {
  0% { background-color: black; }
  50% { background-color: red; }
  100% { background-color: black; }
}

$turret-color: hsl(0, 100%, 0%);

.tower-group__tower {
  $background-color: hsl(0, 0%, 40%);

  background-color: $background-color;
  border-radius: 9999px;
  cursor: pointer;
  z-index: 1;

  &:hover {
    box-shadow: 0 0 25px black;
  }
}

// by applying relative positioning to this element as opposed to the tower
// itself (.tower-group__tower), we can ensure that sibling elements to
// .tower__body can be absolutely positioned relative to the board, as expected
.tower__body {
  height: 100%;
  position: relative;
  width: 100%;

  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.tower-group__tower--upgraded {
  background-color: hsl(0, 0%, 100%);

  .tower__turret--upgraded {
    background-color: $turret-color;
    border-radius: 2px;
    height: 50%;
    width: 50%;

    position: absolute;
    top: 25%; left: 25%;
  }

  .cannon {
    background-color: $turret-color;
    border-radius: 3px;
    position: absolute;
    height: 120%;
    width: 25%;
    left: 38%;
    top: -10%;
  }

  .cannon--1 {}

  .cannon--2 {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;

    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}

.tower__pulse {
  display: none;
  background: yellow;
  border: 10px solid yellow;

  -webkit-border-radius: 60px;
     -moz-border-radius: 60px;
          border-radius: 60px;

  height: 300%;
  width: 300%;

  -webkit-animation: pulse 1.5s ease-out;
     -moz-animation: pulse 1.5s ease-out;
          animation: pulse 1.5s ease-out;

  -webkit-animation-iteration-count: infinite;
     -moz-animation-iteration-count: infinite;
          animation-iteration-count: infinite;

  position: absolute;
  top: -100%; left: -100%;
  transform: translate(-50%,-50%);
  opacity: 0;
}

.tower__turret {
  background-color: $turret-color;
  border-radius: 9999px;
  height: 60%;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 60%;
}

.turret__cannon {
  background-color: $turret-color;
  border-radius: 3px;
  position: absolute;
}

.turret__cannon--1 {
  top: -10%; left: 50%;
  transform: translate(-50%,-50%);
}

.tower-group__tower--selected {
  z-index: 0;

  .tower__pulse {
    display: block;
  }
}

.tower__selector {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tower--colliding {
  .tower__turret, .tower__turret--upgraded {
    -webkit-animation: redden-element 1.5s linear;
    -moz-animation: redden-element 1.5s linear;
    animation: redden-element 1.5s linear;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }

  .turret__cannon, .turret__cannon--1, .cannon, .cannon--1, .cannon--2 {
    -webkit-animation: redden-element 1.5s linear;
    -moz-animation: redden-element 1.5s linear;
    animation: redden-element 1.5s linear;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
}

.tower__radius {
  background-color: hsla(0, 0%, 100%, 0.12);
  border-radius: 9999px;
  height: 710%;
  width: 710%;
  position: absolute;
  top: -305%;
  left: -305%;
}
