/* `loading`, `empty` and `error` swap as a read settles, so the block is placed once on the root and the
   answer moves no edge; the height is what each state says. `done` is a result panel with its own inset;
   `compact` sets left, since a record band already has a heading. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-region-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--lotics-space-4);
    padding-block: var(--lotics-space-48);
  }

  /* The glyph carries the extra rung rather than the column carrying two gutters. */
  .lotics-region-state__icon {
    margin-bottom: var(--lotics-space-4);
  }

  .lotics-region-state__text {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    gap: var(--lotics-space-4);
    min-width: 0;
  }

  .lotics-region-state__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--lotics-space-8);
  }

  /* A verb stands off its lines; an address reads as the text's last line. */
  .lotics-region-state[data-state="error"] .lotics-region-state__actions,
  .lotics-region-state__actions[data-act] {
    margin-block-start: var(--lotics-space-8);
  }

  /* One line: a band inside a record is already named, so the words take the slack and the verb closes the
     line, wrapping rather than squeezing. */
  .lotics-region-state[data-compact] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--lotics-space-8);
    padding-block: var(--lotics-space-8);
  }

  .lotics-region-state[data-compact] .lotics-region-state__text {
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    gap: var(--lotics-space-2);
  }

  /* A `Link` is a button; stretched, its target would reach the row's far edge. */
  .lotics-region-state[data-compact] .lotics-region-state__actions {
    flex-shrink: 0;
    justify-content: flex-start;
  }

  /* On the sentence's line, so no rung above it. */
  .lotics-region-state[data-compact] .lotics-region-state__actions[data-act] {
    margin-block-start: 0;
  }

  .lotics-region-state[data-state="done"] {
    gap: var(--lotics-space-16);
    padding: var(--lotics-space-32);
  }

  /* A wash, not a big glyph: a 40px lucide drawing is the same hairline stretched. The tone's 12% tint
     carries the size. */
  .lotics-region-state[data-state="done"] .lotics-region-state__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    border-radius: var(--lotics-radius-full);
    background-color: color-mix(in srgb, currentColor 12%, transparent);
  }

  /* Title and summary are one object, half a rung; glyph and actions sit a full rung away. */
  .lotics-region-state[data-state="done"] .lotics-region-state__text {
    gap: var(--lotics-space-2);
  }

  .lotics-region-state[data-state="done"] .lotics-region-state__actions {
    padding-block-start: var(--lotics-space-4);
  }
}