$brightBackground: linear-gradient(90deg, rgba(236, 236, 236, 0) 0%, rgb(227, 227, 227) 35%, rgba(241, 241, 241, 0) 100%);
$darkBackground: linear-gradient(90deg, rgb(57, 57, 57) 0%, rgb(45, 45, 45) 35%, rgb(56, 56, 56) 100%);

.skeletonContainer {
  padding: 2%;

  .skeletonTitle {
    height: 15px;
    width: 40%;
    margin-bottom: 10px;
    background: $brightBackground;
  }

  ul {
    padding: 10px 0 0 0;
    margin-bottom: 0;

    li {
      height: 15px;
      width: 100%;
      list-style-type: none;
      background: $brightBackground;
    }

    li+li {
     margin-top: 10px;
    }
  }
}

.round {
  .skeletonTitle {
    border-radius: 25px;
  }

  .skeletonParagraph {
      border-radius: 25px;
  }
}

.dark {
  .skeletonTitle {
    background: $darkBackground;
  }

  .skeletonParagraph {
      background: $darkBackground;
  }
}

.active {
  .skeletonTitle {
    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
  }

  .skeletonParagraph {
      background-size: 400% 400%;
      animation: gradient 5s ease infinite;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}