/*
 * THE INLINE-CONTROL GRID, minus the editor. It matches `inline_edit`'s view box
 * exactly — height, radius, inset and a 1px TRANSPARENT border — so a value that
 * is not an editor keeps the column's one left edge and one baseline. The
 * vertical inset comes from the control rung, which bites from the SECOND line on.
 *
 * The VALUE's own type is the VALUE rung, reached through the token rather than a
 * `Text` — the ramp's `[data-size]` rung outranks a part class, so the treatment
 * could only be won back with an inline `style` (`theming.md` §1).
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-inline-value {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-width: 0;
    min-height: var(--lotics-control-height);
    padding-inline: var(--lotics-control-pad-x);
    padding-block: var(--lotics-control-pad-y);
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    border-radius: var(--lotics-radius-control);
  }

  /* The value takes the slack and the verbs pin right, so rows with and without a
     verb keep one right edge. */
  .lotics-inline-value[data-actions] {
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-8);
  }

  .lotics-inline-value__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
  }

  .lotics-inline-value__value {
    display: inline;
    font-family: var(--font-sans);
    font-size: var(--lotics-value-text);
    line-height: var(--lotics-value-leading);
    letter-spacing: var(--lotics-value-tracking);
    font-weight: var(--lotics-weight-regular);
    font-feature-settings: var(--lotics-font-features);
    color: var(--lotics-ink-default);
    text-align: start;
    text-decoration: none;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    /* Zero-width, but it NAMES the hairline: unstated it falls to `currentColor`,
       a different computed value on every ink. */
    border: 0 solid var(--border);
  }

  /* ONE LINE unless the caller asked the value to wrap: a record's field column
     reads as a column only if its rows are one height. */
  .lotics-inline-value__value[data-clamped] {
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
  }

  .lotics-inline-value__value[data-align="right"] {
    text-align: right;
  }

  .lotics-inline-value__value[data-weight="medium"] {
    font-weight: var(--lotics-weight-medium);
  }

  /* The two quieter inks, in the order they override: a muted value is
     secondary, an unset one is the placeholder and wins. */
  .lotics-inline-value__value[data-muted] {
    color: var(--lotics-ink-muted);
  }

  .lotics-inline-value__value[data-empty] {
    color: var(--lotics-ink-placeholder);
  }
}