[data-skeleton="loading"] {
  color: transparent;
  position: relative;
  width: var(--skeleton-width, 100%);
  height: var(--skeleton-height, 1em);

}

@media (max-width: 640px) {
  [data-skeleton="loading"] {
    width: var(--skeleton-width-mobile, var(--skeleton-width, 100%));
    height: var(--skeleton-height-mobile, var(--skeleton-height, 1em));
  }
}

[data-skeleton="loading"]::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: var(--skeleton-radius, 4px);
  background: -webkit-gradient(linear, left top, right top, from(#f3f4f6), color-stop(#f9fafb), to(#f3f4f6));
  background: -o-linear-gradient(left, #f3f4f6, #f9fafb, #f3f4f6);
  background: linear-gradient(90deg, #f3f4f6, #f9fafb, #f3f4f6);
  background-size: 200% 100%;
  -webkit-animation: skeleton-shimmer 1.6s infinite;
          animation: skeleton-shimmer 1.6s infinite;
  opacity: 1;
  -webkit-transition: opacity 180ms ease-out;
  -o-transition: opacity 180ms ease-out;
  transition: opacity 180ms ease-out;
}

[data-skeleton="loaded"] {
  color: inherit;
  position: static;
}

[data-skeleton="loaded"]::after {
  display: none;
  opacity: 0;
}

@-webkit-keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}