@layer components {
  /*
    読み込み中のインジケーターは、文字の横に置く小さな印。手本は無い（推測）。
    Retrixは動きを使わないので、どれも止まった形のまま「待っている」と読めるようにし、何を待つかは隣の文で伝える。
    - wave（既定）: 三つの灰色の点を、書き始めの側から濃・中・淡に並べる。文の後に続く「…」と同じ形で、続きがあると読める。
    - orbit: 淡い輪の上の一部だけを濃くした丸（時計の針が進む途中の形）。
    - halo: 灰色の細い輪と、中の小さな点。
    この領域で待つ時は、面を敷かずに少し大きめのインジケーターと文を中央に縦に並べる。
  */
  .rx-loading {
    display: flex;
    align-items: start;
    gap: var(--rx-space-2);
    min-inline-size: 0;
    color: var(--rx-muted);
    font-size: var(--rx-label);
    line-height: var(--rx-label-leading);
    & > .indicator {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
      gap: 0.1875em;
      inline-size: 1em;
      block-size: 1em;
      margin-block-start: calc((1lh - 1em) / 2);
      flex: none;
      /* 回る丸の四角い要素が回転中に外接する四角を広げ、行の端で横にはみ出さないよう、インジケーターの枠で切る。 */
      overflow: clip;
    }
    & > .label {
      min-inline-size: 0;
      overflow-wrap: anywhere;
    }
    &[data-layout="region"] {
      flex-direction: column;
      align-items: center;
      gap: var(--rx-space-3);
      padding-block: var(--rx-space-8);
      padding-inline: var(--rx-space-5);
      text-align: center;
      & > .indicator {
        font-size: 1.75rem;
        margin-block-start: 0;
      }
    }
    /* 淡い輪の上の一部だけを濃くした丸。 */
    &[data-variant="orbit"] > .indicator::before {
      content: "";
      position: absolute;
      inset: 0.0625em;
      border: 0.125em solid var(--rx-border);
      border-block-start-color: var(--rx-muted);
      border-radius: 50%;
    }
    /* 三つの点。書き始めの側から濃・中・淡の灰色にする（透明度ではなく色で淡くする）。 */
    &[data-variant="wave"] > .indicator {
      inline-size: auto;
      gap: 0.1875em;
      & > i {
        inline-size: 0.3125em;
        block-size: 0.3125em;
        border-radius: 50%;
        background: var(--rx-muted);
      }
      & > i:nth-child(2) {
        background: color-mix(in srgb, var(--rx-muted) 60%, var(--rx-surface));
      }
      & > i:nth-child(3) {
        background: color-mix(in srgb, var(--rx-muted) 30%, var(--rx-surface));
      }
    }
    /* 灰色の細い輪と、中の小さな点。 */
    &[data-variant="halo"] > .indicator::before {
      content: "";
      position: absolute;
      inset: 0.0625em;
      border: 0.125em solid var(--rx-muted);
      border-radius: 50%;
    }
    &[data-variant="halo"] > .indicator::after {
      content: "";
      inline-size: 0.25em;
      block-size: 0.25em;
      border-radius: 50%;
      background: var(--rx-muted);
    }
  }
  @media (forced-colors: active) {
    .rx-loading[data-variant="orbit"] > .indicator::before {
      border-color: GrayText;
      border-block-start-color: CanvasText;
    }
    .rx-loading[data-variant="wave"] > .indicator > i {
      forced-color-adjust: none;
      background: CanvasText;
    }
    .rx-loading[data-variant="halo"] > .indicator::before {
      border-color: CanvasText;
    }
    .rx-loading[data-variant="halo"] > .indicator::after {
      forced-color-adjust: none;
      background: CanvasText;
    }
  }
}