@-webkit-keyframes loading {
  0% {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

.skeleton {
  display: block;
  border-radius: 5px;
}

.skeleton.loaded {
  width: unset !important;
}

.skeleton:not(.wrapper):not(.show) {
  display: none;
}

.wrapper:not(.show):before {
  content: none;
}

.skeleton:not(.wrapper):not(.loaded) {
  border-radius: var(--geist-radius);
  background-image: linear-gradient(
    270deg,
    var(--accents-1),
    var(--accents-2),
    var(--accents-2),
    var(--accents-1)
  );
  background-size: 400% 100%;
  -webkit-animation: loading 8s ease-in-out infinite;
  animation: loading 8s ease-in-out infinite;
}

.wrapper {
  display: block;
  position: relative;
}

.wrapper:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  z-index: 100;
  background-image: linear-gradient(
    270deg,
    var(--accents-1),
    var(--accents-2),
    var(--accents-2),
    var(--accents-1)
  );
  background-size: 400% 100%;
  -webkit-animation: loading 8s ease-in-out infinite;
  animation: loading 8s ease-in-out infinite;
}

.inline {
  display: inline-block !important;
}

.squared,
.squared.wrapper:before {
  border-radius: 0 !important;
}

.rounded,
.rounded.wrapper:before {
  border-radius: 50% !important;
}