@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  /* ========================================
 * SKELETON
 * ======================================== */

  /* The fill is a translucent step of the border ink, so a bar shows on whatever surface it sits on.
     The shimmer's highlight is the same ink at half its alpha: a lightness lift did nothing in dark,
     where the ink is already white. */
  .cinder-skeleton {
    display: block;
    width: 100%;
    height: 1em;
    border-radius: var(--cinder-radius-sm);
    background: linear-gradient(
      90deg,
      var(--cinder-skeleton-background) 0%,
      oklch(from var(--cinder-skeleton-background) l c h / calc(alpha * 0.5)) 50%,
      var(--cinder-skeleton-background) 100%
    );
    background-size: 200% 100%;
    animation: cinder-skeleton-shimmer 1.5s ease-in-out infinite;
  }

  /* A group stacks several bars and, when asked, a "Still loading" status line. Only the bars
   * are decorative: the status sits outside the aria-hidden wrapper so it can be announced. */
  .cinder-skeleton-group {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-3);
    inline-size: 100%;
  }

  .cinder-skeleton-lines {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-2);
  }

  .cinder-skeleton-group > .cinder-skeleton-lines > .cinder-skeleton[data-cinder-last] {
    width: 60%;
  }

  /* Form variant: a short label bar over a control bar, once per field, in the control height. */
  .cinder-skeleton-group[data-cinder-variant='form'] > .cinder-skeleton-lines {
    gap: var(--cinder-space-2);
  }

  .cinder-skeleton-field-label {
    inline-size: 20%;
    block-size: var(--cinder-space-2-5);
  }

  .cinder-skeleton-field-control {
    inline-size: 100%;
    block-size: var(--cinder-control-height-md);
    margin-block-end: var(--cinder-space-2);
  }

  .cinder-skeleton-group[data-cinder-variant='card'] > .cinder-skeleton-lines {
    padding: var(--cinder-space-4);
    gap: var(--cinder-space-3);
    border: 1px solid var(--cinder-border-muted);
    border-radius: var(--cinder-radius-md);
    background: var(--cinder-surface);
  }

  /* List variant: the placeholder for a status-first list. A bordered surface holds an optional
   * day band and rows of a fixed 8rem status column (the stacked-list-item column), two text
   * bars and a time bar. No leading circle or avatar is drawn, so nothing shifts when the real
   * rows arrive. The group is a size container so a phone drops the status under the text. */
  .cinder-skeleton-group[data-cinder-variant='list'] {
    container-type: inline-size;
    container-name: cinder-skeleton;
  }

  .cinder-skeleton-list {
    overflow: hidden;
    border: 1px solid var(--cinder-border-muted);
    border-radius: var(--cinder-radius-lg);
    background: var(--cinder-surface);
  }

  /* Inside a card that already frames its rows. */
  .cinder-skeleton-list[data-cinder-framed='false'] {
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .cinder-skeleton-day-band {
    padding-block: var(--cinder-space-2);
    padding-inline: var(--cinder-space-3-5);
    /* A tint toward the inset, quieter than the inset itself, so the band stays a band. */
    background: color-mix(in oklch, var(--cinder-surface), var(--cinder-surface-inset) 40%);
    border-block-end: 1px solid var(--cinder-border-muted);
  }

  .cinder-skeleton-row {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr) auto;
    grid-template-areas: 'status text time';
    align-items: start;
    column-gap: var(--cinder-space-3);
    padding-block: var(--cinder-space-2-5);
    padding-inline: var(--cinder-space-3-5);
  }

  /* Rows that do not lead with a status word: the marker's own width, then the text. */
  .cinder-skeleton-row[data-cinder-status-column='none'] {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .cinder-skeleton-row + .cinder-skeleton-row {
    border-block-start: 1px solid var(--cinder-border-muted);
  }

  .cinder-skeleton-row-status {
    grid-area: status;
  }

  .cinder-skeleton-row-text {
    grid-area: text;
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-2);
  }

  .cinder-skeleton-row-time {
    grid-area: time;
  }

  .cinder-skeleton-row-status,
  .cinder-skeleton-row-text,
  .cinder-skeleton-row-time {
    padding-block-start: var(--cinder-space-1);
  }

  .cinder-skeleton-day-bar {
    height: 0.625rem;
    width: 8.75rem;
  }

  .cinder-skeleton-status-bar {
    height: 0.625rem;
    width: 4rem;
  }

  /* A list whose rows lead with a status dot: a dot in the same column, so the text lines up with
   * the real rows. The 1px nudge centres it on the first line of the title. */
  .cinder-skeleton-status-bar[data-cinder-marker='dot'] {
    height: 0.5rem;
    width: 0.5rem;
    margin-block-start: 1px;
    border-radius: var(--cinder-radius-full);
  }

  .cinder-skeleton-title-bar {
    height: 0.625rem;
    width: 55%;
  }

  .cinder-skeleton-meta-bar {
    height: 0.5rem;
    width: 80%;
  }

  .cinder-skeleton-time-bar {
    height: 0.625rem;
    width: 2.75rem;
  }

  @container cinder-skeleton (max-width: 448px) {
    .cinder-skeleton-row {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        'text time'
        'status .';
      row-gap: var(--cinder-space-2);
    }

    /* A row with no status word keeps its marker beside the text, as the real row does: the
     * status drops under the text only for the status-first rows that lead with a word. */
    .cinder-skeleton-row[data-cinder-status-column='none'] {
      grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas: 'status text time';
    }
  }

  .cinder-skeleton-group[data-cinder-variant='list'] > .cinder-skeleton-status {
    justify-content: center;
  }

  /* A page's own placeholder has its status line centred under it as well. */
  .cinder-skeleton-group[data-cinder-variant='custom'] > .cinder-skeleton-status {
    justify-content: center;
  }

  .cinder-skeleton-heading {
    height: 1.25em;
    width: 40%;
    margin-block-end: var(--cinder-space-1);
  }

  .cinder-skeleton-status {
    display: flex;
    align-items: center;
    gap: var(--cinder-space-2);
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-normal);
    color: var(--cinder-text-muted);
  }

  .cinder-skeleton-status:empty {
    display: none;
  }

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

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-cinder-reduced-motion='false']):not([data-reduced-motion='off'])
      .cinder-skeleton {
      animation: none;
      background: var(--cinder-skeleton-background);
    }
  }

  :root:is([data-cinder-reduced-motion='true'], [data-reduced-motion='on']) .cinder-skeleton {
    animation: none;
    background: var(--cinder-skeleton-background);
  }
}