.Skeleton {
  position: relative;

  overflow: hidden;

  width: 100%;
  height: 100%;

  background-color: var(--color-skeleton-background);

  &.inline {
    display: inline-block;
    height: 1rem;
    border-radius: 0.5rem;
  }

  &.round {
    border-radius: 50%;
  }

  &.rounded-rect {
    border-radius: 1rem;
  }

  &.pulse::before {
    content: "";

    display: block;

    width: 100%;
    height: 100%;

    background-color: var(--color-skeleton-foreground);

    animation: skeleton-pulse 2s ease-in-out 0.5s infinite;

    @keyframes skeleton-pulse {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0.4;
      }
      100% {
        opacity: 1;
      }
    }
  }

  &.wave::before {
    content: "";

    position: absolute;

    display: block;

    width: 100%;
    height: 100%;

    background: linear-gradient(to right, transparent 0%, var(--color-skeleton-foreground) 50%, transparent 100%);

    animation: skeleton-wave 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

    @keyframes skeleton-wave {
      0% {
        transform: translateX(-100%);
      }
      50% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(100%);
      }
    }
  }

  &.fast-wave::before {
    content: "";

    position: absolute;

    display: block;

    width: 100%;
    height: 100%;

    background: linear-gradient(90deg, transparent 0%, var(--color-skeleton-foreground) 50%, transparent 100%);

    animation: skeleton-fast-wave 1.5s ease-in-out infinite;

    @keyframes skeleton-fast-wave {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(100%);
      }
    }
  }

  :global(body.in-background) &::before {
    animation-play-state: paused;
  }
}
