/*
 * ONE ANATOMY, four states. `loading`, `empty` and `error` swap into one another
 * as a read settles, so the block is placed ONCE, here on the root: they set in
 * the same 48 and stack on the same rung, and the answer's arrival moves no
 * edge. Its HEIGHT is what each state has to say — an error carries a retry
 * nobody can reserve for a spinner. `done` is a result panel rather than a
 * placeholder and takes its own inset; `compact` sets to the LEFT, because a
 * band inside a record already has a heading doing the anchoring.
 */
@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 itself 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 the lines it answers. An address does not: a destination
     reads as the last line of the text block, not as a control under it. */
  .lotics-region-state[data-state="error"] .lotics-region-state__actions,
  .lotics-region-state__actions[data-act] {
    margin-block-start: var(--lotics-space-8);
  }

  .lotics-region-state[data-compact] {
    align-items: stretch;
    gap: var(--lotics-space-2);
    padding-block: var(--lotics-space-8);
  }

  .lotics-region-state[data-compact] .lotics-region-state__text {
    gap: var(--lotics-space-2);
  }

  /* A `Link` is a BUTTON: stretched, its press target would reach the far edge
     of a row whose text ends after three words. */
  .lotics-region-state[data-compact] .lotics-region-state__actions {
    justify-content: flex-start;
  }

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

  /* THE MARK IS A WASH, NOT A BIG GLYPH: a 40px lucide drawing is the same
     hairline stretched over twice the box. The glyph stays on the icon ladder
     and the tone's 12% tint — `currentColor` — 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);
  }

  /* The title and its summary are ONE object — half a rung — while the glyph and
     the actions sit a full rung away, which is what makes the three read as
     three things. */
  .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);
  }
}