/* <Skeleton>: a tinted shape with a light band moving across it. Motion
   follows the page's setting, the same three rules the page switch uses
   (`shell/Shell.css`): off for an OS that asks for less motion, off when the
   setting says reduce, back on when the setting says allow. Where it is off
   the shape is a plain tinted block. */
.ui-skeleton {
  display: block;
  border-radius: 0.3em;
  background-color: color-mix(in srgb, var(--muted) 22%, transparent);
  background-image: linear-gradient(
    90deg,
    transparent 0,
    color-mix(in srgb, var(--fg) 12%, transparent) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: 150% 0;
  animation: ui-skeleton-shimmer 1.4s ease-in-out infinite;
}
.ui-skeleton-line {
  height: 1em;
  max-width: 100%;
}
.ui-skeleton-circle {
  border-radius: 50%;
}
.ui-skeleton-block {
  border-radius: 0.5em;
}
@keyframes ui-skeleton-shimmer {
  to {
    background-position: -50% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-skeleton {
    animation: none;
    background-image: none;
  }
}
:root[data-motion="reduce"] .ui-skeleton {
  animation: none;
  background-image: none;
}
:root[data-motion="allow"] .ui-skeleton {
  background-image: linear-gradient(
    90deg,
    transparent 0,
    color-mix(in srgb, var(--fg) 12%, transparent) 50%,
    transparent 100%
  );
  animation: ui-skeleton-shimmer 1.4s ease-in-out infinite;
}

/* The words a screen reader gets, out of sight. */
.ui-skeleton-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ui-skeleton-region {
  display: contents;
}

/* Lines of text stacked with a line's own spacing. */
.ui-skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

/* A badge placeholder as tall and wide-set as an interactive Badge
   (`.ui-badge-interactive` in @hive/shared's Badge.css: the settings values
   are all buttons), so the pill does not change size when its value lands. */
.ui-skeleton-badge {
  box-sizing: border-box; /* as the button it stands in for */
  min-height: 2.75em;
  padding-inline: 0.8em;
  border-radius: 999px;
}
.ui-skeleton-badge .ui-skeleton {
  display: inline-block;
  vertical-align: middle;
}