/**
 * Skeleton
 */
@import "helpers";

.skeleton-bg {
  background-image: url("data:image/svg+xml;utf8,<svg  xmlns='http://www.w3.org/2000/svg' fill='%23ccc' viewBox='0 0 20 18'><path d='M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z'></path></svg>");
  background-size: 15%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #e5e7eb;
  border-radius: 4px;
  animation: skeleton-animate 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.skeleton-txt {
  position: relative;
}
.skeleton-txt::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'><rect x='0' y='0' width='100' height='25' rx='1' ry='8' fill='%23e5e7eb'/></svg>");
  overflow: hidden;
  background-size: 100% 1lh;
  background-repeat: no-repeat repeat;
  z-index: 1;
}
.skeleton-txt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(to right, transparent 30%, rgba(255, 255, 255, 0.4) 70%, transparent);
  background-size: 60% 1lh;
  background-repeat: no-repeat repeat;
  background-position: -130% 0;
  animation: skeleton-txt-animate 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.skeleton-txt:not(.skeleton-hide),
.skeleton-txt:not(.skeleton-hide) * {
  color: transparent !important;
}
.skeleton-txt.skeleton-hide::before,
.skeleton-txt.skeleton-hide::after {
  content: unset;
}

@keyframes skeleton-txt-animate {
  100% {
    background-position: 180% 0;
  }
}
@keyframes skeleton-animate {
  0%,
  100% {
    background-color: rgba(229, 231, 235, 1);
  }
  50% {
    background-color: rgba(229, 231, 235, .5);
  }
}