@import "variables";

/* Container for Pokeball Sphere */

#loading-pokeball-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Entire Pokeball Sphere */

#loading-pokeball {
  height: 50vmin;
  width: 50vmin;
  background-color: $red;
  border-radius: 50%;
  border: 2vmin solid black;
  -webkit-animation: spin 1.5s infinite;
  animation: spin 1.5s infinite;
}

/* Inner Circle */

#loading-pokeball::after {
  content: "";
  background: white;
  background: -moz-radial-gradient(center, ellipse cover,  grey 25%, white 25%);
  background: -webkit-radial-gradient(center, ellipse cover,  grey 25%, white 25%);
  background: radial-gradient(ellipse at center,  grey 25%, white 25%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='grey', endColorstr='white',GradientType=1);
  border: 2vmin solid black;
  height: 12.5vmin;
  width: 12.5vmin;
  top: 16.5vmin;
  left: 30vmin;
  z-index: 2;
  position: absolute;
  border-radius: 100%;
}

/* Bottom Half */

#loading-pokeball::before {
  content: "";
  background-color: white;
  z-index: 1;
  height: 25vmin;
  width: 49.75vmin;
  position: absolute;
  top: 23vmin;
  left: -1.72vmin;
  border-radius: 0 0 50vmin 50vmin;
  border: 2vmin solid black;
}

@-webkit-keyframes spin {
    0% {
      -webkit-transform: rotateX(0deg) rotate(0deg);
    }
    50% {
      -webkit-transform: rotateX(360deg) rotate(-180deg);
    }
    100% {
      -webkit-transform: rotateX(720deg) rotate(0deg);
    }
}

@keyframes spin {
    0% {
      transform: rotateX(0deg) rotate(0deg);
    }
    50% {
      transform: rotateX(360deg) rotate(-180deg);
    }
    100% {
      transform: rotateX(720deg) rotate(0deg);
    }
}
