src/components/layout/aside/states/loading.module.scss
.wrapper {
  position: relative;
  top: var(--space-16);
  width: 100%;
  height: max-content;
  padding: var(--space-4);
  text-align: center;

  border-radius: var(--radii-lg);
  background: var(--colors-white);
  box-shadow: var(--shadow-light);

  animation: fadeIn 0.3s;
}

.gender {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);

  display: flex;
  gap: var(--space-2);
  flex-direction: column;
  align-items: center;

  p {
    width: var(--space-8);
    aspect-ratio: 1/1;
    border-radius: var(--radii-md);
  }
}

.figure {
  width: var(--space-28);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  margin-top: var(--space-4);
  transform: translateY(calc(-50% - var(--space-3)));
  border-radius: var(--radii-md);
}

.id {
  width: var(--space-8);
  height: var(--space-3);
  margin-inline: auto;
  margin-top: -3.2rem;
  border-radius: var(--radii-sm);
}

.name {
  width: var(--space-32);
  height: var(--space-7);
  margin: var(--space-4) auto 0;
  border-radius: var(--radii-sm);
}

.types {
  margin: var(--space-1) auto 0;
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;

  p {
    width: var(--space-12);
    height: var(--space-7);
    border-radius: var(--radii-sm);
  }
}

.title {
  width: var(--space-20);
  height: var(--space-5);
  margin: var(--space-2) auto;
  text-align: center;
  border-radius: var(--radii-sm);
}

.entry {
  margin: var(--space-3) auto 0;

  h2 {
    width: var(--space-32);
  }

  p {
    width: 100%;
    height: var(--space-12);
    border-radius: var(--radii-sm);
  }
}

.abilities {
  margin: var(--space-3) auto 0;

  div {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
  }

  p {
    flex: 1;
    height: var(--space-8);
    border-radius: var(--radii-full);
  }
}

.characteristics {
  margin: var(--space-3) auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-2);
  row-gap: var(--space-2);

  p {
    width: 100%;
    height: var(--space-7);
    border-radius: var(--radii-full);
  }
}

.stats {
  margin: var(--space-1) auto 0;

  div {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
  }

  h2 {
    width: var(--space-16);
  }

  p {
    flex: 1;
    height: var(--space-12);
    line-height: 100%;
    border-radius: var(--radii-full);
  }
}

.evolutions {
  margin-inline: auto;
  margin-top: var(--space-4);
}

.evolutionsWrapper {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;

  div {
    width: var(--space-12);
    aspect-ratio: 1 /1;
    border-radius: var(--radii-sm);
  }

  p {
    width: var(--space-10);
    height: var(--space-5);
    border-radius: var(--radii-full);
  }
}

.nextPrevPokemons {
  width: 100%;
  height: var(--space-14);
  margin-top: var(--space-4);
  border-radius: var(--radii-md);
}

.loadingAnimate {
  animation: loading 1.5s ease infinite;
  background-position: -150% 0;
  background-size: 100% 100%;
  background: linear-gradient(
      90deg,
      var(--colors-pokedex-medium) 35%,
      var(--colors-white),
      var(--colors-pokedex-medium) 55%
    )
    right / 300% 100%;
}

@keyframes loading {
  to {
    background-position: left;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(var(--space-4));
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 980px) {
  .wrapper {
    top: var(--space-20);
    right: var(--space-8);
    max-width: 20rem;
    width: calc(100% - var(--space-16));
    margin-bottom: calc(var(--space-20) + var(--space-10));
  }
}
