@layer components {
  .sk-loading {
    position: relative;
    color: transparent !important;
    background-color: var(--skeleton) !important;
    border-color: transparent !important;
    pointer-events: none;
    user-select: none;
    box-shadow: none !important;
  }

  .sk-loading * {
    color: inherit !important;
  }
  .sk-loading img,
  .sk-loading svg {
    opacity: 0;
  }

  .sk-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      var(--skeleton) 30%,
      var(--skeleton-shine) 50%,
      var(--skeleton) 70%
    );
    background-size: 400%;
    animation: shimmer 1.5s infinite linear;
    border-radius: inherit;
    pointer-events: none;
  }

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