/*
 * The finished state of a Turbo Frame with nothing to show, or whose request
 * failed (`shared/_frame_state`): a bordered panel at the height the
 * placeholder reserved, the height arriving as --height like .skeleton's,
 * with one centred line and, for an error, a Retry trigger.
 *
 *   <div class="frame-state frame-state--error" style="--height: 300px">
 *
 * Unlike the skeleton it does not breathe: nothing more is on its way.
 */
@layer components {
  .frame-state {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-xs);
    /* At least the reserved height: an empty state fills it exactly, and a
       failure in a short frame (the price beside a company's name) may grow
       it rather than clip its Retry. */
    min-block-size: var(--height, 100px);
    padding: var(--space-md);
    border: var(--rule-width) solid var(--color-rule);
    border-radius: var(--radius-lg);
    color: var(--color-ink-muted);
    font-family: var(--font-ui);
    font-size: var(--text-ui-sm);
    line-height: var(--leading-ui-sm);
    text-align: center;
  }

  .frame-state__message {
    margin: 0;
  }

  /* A failure reads a step darker than an absence, and says what to do. */
  .frame-state--error {
    border-style: dashed;
    color: var(--color-ink-soft);
  }
}