@layer components {
  /* Where a guest stands (Booking::Sentiment::Standing): a dot on an inbox row
   * and, in an opened thread, a strip with a face, the standing word and the
   * guest's marks out of ten.
   *
   * The dot takes the tones the badge does, so a row and its thread cannot
   * disagree; with no tone it is faint rather than absent, so a row without
   * one still says the guest was read and nothing needs reading. */
  .mood-dot {
    --mood-dot-size: 0.6em;
    --mood-dot-color: var(--color-ink-faint);

    display: inline-block;
    vertical-align: middle;
    margin-inline-end: var(--space-quarter);
    inline-size: var(--mood-dot-size);
    block-size: var(--mood-dot-size);
    border-radius: var(--radius-pill);
    background: var(--mood-dot-color);
  }

  .mood-dot--positive { --mood-dot-color: var(--color-positive); }
  .mood-dot--warning { --mood-dot-color: var(--color-warning); }
  .mood-dot--negative { --mood-dot-color: var(--color-negative); }

  /* In a thread, a strip under its header, one line across the pane. The
   * tone tints the strip and colours the word; with no tone it is the quiet
   * surface, so a guest who is fine is a line nobody has to read. The reason
   * is the one thing that gives way when the pane is narrow. */
  .mood {
    --mood-background: var(--surface-quiet);
    --mood-color: var(--color-ink);

    display: flex;
    align-items: center;
    gap: var(--space-quarter);
    padding: var(--space-quarter) var(--pane-gutter);
    border-block-end: var(--border);
    background: var(--mood-background);
    font-size: var(--text-small);
    color: var(--color-ink-soft);
  }

  .mood--positive { --mood-background: var(--surface-positive); --mood-color: var(--color-positive-ink); }
  .mood--warning { --mood-background: var(--surface-warning); --mood-color: var(--color-warning-ink); }
  .mood--negative { --mood-background: var(--surface-negative); --mood-color: var(--color-negative); }

  /* The face is the button that opens the stay's timeline: bare, so it still
     reads as a face, with a ring on hover and focus to say it can be pressed. */
  .mood__face {
    padding: var(--space-eighth);
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    font-size: var(--text-medium);
    line-height: var(--leading-none);
    cursor: pointer;

    &:hover, &:focus-visible { background: color-mix(in oklab, var(--mood-color) 12%, transparent); }
  }

  .mood__word {
    flex: none;
    color: var(--mood-color);
    font-weight: var(--weight-semibold);
  }

  /* How the guest feels now and how the stay has gone overall, each out of
     ten. They keep their width: the reason beside them is what gives way. */
  .mood__score {
    flex: none;
  }

  /* Which way the guest's latest message moved how they feel, beside the
     mark it moved. */
  .mood__move {
    display: inline-flex;
    vertical-align: middle;
    margin-inline-start: var(--space-eighth);
    color: var(--mood-color);
  }

  .mood__reason {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}