@import "~scss/variables";

@keyframes skeleton-pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: $skeleton-pulse-opacity;
  }

  100% {
    opacity: 1;
  }
}

.skeleton {
  background-color: $skeleton-color;
  animation: skeleton-pulse $skeleton-pulse-duration ease-in-out $skeleton-pulse-delay infinite;

  &.skeleton-text {
    // Make it take up the space of a normal line
    display: inline-block;
    line-height: 1;

    width: 100%;
    max-width: $skeleton-max-width;
    height: $skeleton-height;

    border-radius: $skeleton-height;
  }
}