/*
 * THE INLINE-CONTROL GRID, minus the editor: `inline_edit`'s view box exactly, so a non-editor
 * value keeps the column's edge and baseline. The type comes via the token, since the ramp's
 * `[data-size]` outranks a part class (`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);
  }

  /* Verbs pin right so rows 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;
    /* Names the hairline, or it falls to `currentColor`. */
    border: 0 solid var(--border);
  }

  /* One line unless asked, so the column's rows share a 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);
  }

  /* Muted is secondary; unset 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);
  }
}