[data-fui-comp="ui-color-field"] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 8px);
  inline-size: 100%;
}

[data-fui-comp="ui-color-field"] .ui-color-field__swatch {
  flex: 0 0 auto;
  /* Square, and at least a comfortable tap target. */
  inline-size: var(--spacing-touch-target, 44px);
  block-size: var(--spacing-touch-target, 44px);
  padding: 2px;
  border: 1px solid var(--color-border, #e4e4e7);
  border-radius: var(--radii-sm, 4px);
  background-color: var(--color-surface, #fff);
  cursor: pointer;
}

[data-fui-comp="ui-color-field"] .ui-color-field__text {
  /* The value is the point, so the text input takes the room. min-inline-size
     resets the intrinsic width an <input> otherwise insists on, which would
     push the row wider than its container. */
  flex: 1 1 auto;
  min-inline-size: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
}