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

.sabia-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;

  /* Define the colors as css custom props */
  --sabia-skeleton_default-color: #e0e0e0;
  --sabia-skeleton_shimmer-color: #fff;
  * {
    /* Apply the animation that moves the background */
    animation: sabia-skeleton-shimmer 1.5s cubic-bezier(0.80,0,0.60,1) infinite;
    /* Create a background that has a small shimmer "stripe"
      and tilt it 100 degrees. */
    background: linear-gradient(
      100deg,
      var(--sabia-skeleton_default-color),
      var(--sabia-skeleton_default-color) 50%,
      var(--sabia-skeleton_shimmer-color) 60%,
      var(--sabia-skeleton_default-color) 70%
    );
    /* Make the background twice the width so we can offset it. */
    background-size: 200% 100%;
    background-attachment: fixed;
  }
}

.sabia-skeleton .skeleton-line {
  width: 100%;
  height: 24px;
  border-radius: 10px;
  background-color: var(--sabia-skeleton_default-color);
}

.sabia-skeleton .skeleton-line:nth-last-child(2) {
  width: 76%;
}

.sabia-skeleton .skeleton-line:last-child {
  width: 30%;
}

.result-header {
  display: flex;
  align-items: center;
  gap: 10px;
}