/* Skeleton CSS */
:root:not([data-color-scheme="dark"]) .skeleton {
  box-shadow: 0 0 5px rgba(64, 64, 64, 0.1);
}

@keyframes skeleton-animation {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(200%);
  }
}
.table-skeleton {
  border: 1px solid var(--border-bg);
}
.table-skeleton thead {
  background-color: var(--border-bg);
}
.table-skeleton-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.skeleton {
  background-color: var(--hover-bg);
  overflow: hidden;
  border-radius: 0;
  width: 20%;
  height: 30px;
  margin: 5px 15px;
}
.table-skeleton thead .skeleton {
  background-color: var(--main-bg);
}
.skeleton::before {
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    var(--card-bg),
    rgba(255, 255, 255, 0)
  );
  /* animation: skeleton-animation 1.25s ease-in-out infinite; */
}

.skeleton::after {
  background: linear-gradient(
      to right,
      transparent 0 20%,
      var(--main-bg),
      transparent 80% 100%
    ) -300% 0 / 80% 100% no-repeat;
}