@layer ui-reset, ui;

/* skeleton */
@layer ui {
  @keyframes ui-skeleton-pulse {
    50% {
      opacity: .5;
    }
  }

  .skeleton {
    border-radius: var(--ui-rounded-2);
    background-color: var(--ui-neutral-300);
    animation: ui-skeleton-pulse 2s var(--ease-in-out-sine) infinite;
    color: #0000;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;

    & * {
      visibility: hidden;
    }

    &.circle {
      border-radius: var(--ui-rounded-full);
      aspect-ratio: 1;
    }

    &:not(.circle) {
      height: 1em;
    }
  }
}